Recently made mobile Web pages, using the zepto.js, its approximate usage is similar to jquery, but in time bound to be trapped a long pit.
The main point here is to bind events to future elements. Future elements: This refers to the new component or element that is rendered to the page after the data has been requested by Ajax.
For example, the original page is this:
...
<body>
<ul class="Ul_wrap" >
<li class="Li_item" > original content 1</li>
<li class="Li_item" > original content 2</li>
</ul>
</body>
Then, by requesting the data, insert the new li tag and content into the page:
JS is like this:
Success:function(res ) {
var appendobj = $(". Ul_wrap");
if(Res.code = = 1 ) {
var lilists = Res.data;
For (var i=0; i<lilists.length; i++ ) {
var new_li_item = "<li class=' New_li_item' >" + lilists[i] +"</li >";
appendobj.html(appendobj.html() + New_li_item );
}
}
}
After the delay is loaded, the next element with the New_li_item class is the one described above, for example, to bind these future elements to a point-and-click event, such as binding in JQ:
$(". Ul_wrap"). Delegate(". New_li_item", "click", function() {
Do something
})
In Zepto, the binding method of the above JQ is invalid and must be bound like this:
$("body. Ul_wrap"). On("Click", ". New_li_item", function() {
Do something
})
Mobile Port JQ and Zepto event bindings
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
