[英]Binding events to list elements
我正在使用JQuery动态创建一个列表,并希望将每个元素绑定到“ tap”事件。 我该怎么做? 这是我要尝试执行的操作的一个示例,但是没有用。
for(var i=1; i <= 5; i++) {
var id = "item" + i;
var li = $("<li data-theme=\"d\" id=\"" + id + "\">Item " + i + "</li>");
li.appendTo(ul);
$(document).delegate("#"+id, "tap", function() {
$("#"+id).attr({ "data-theme" : "e", "class" : "ui-li ui-li-static ui-btn-up-e" });
});
}
点击任何元素时都会触发此代码,但是由于某种原因,它总是会修改列表中的最后一个元素。
您的选择
将事件处理移到循环外
for(var i=1; i <= 5; i++) { .... } $(document).delegate("[id^=item]", "tap", function() { });
使用bind
方法,将tap
事件应用于元素,而不应用于document
。
for(var i=1; i <= 5; i++) { //append li to ul $("#"+id).bind("tap", function() { $(this).attr({ "data-theme" : "e", "class" : "ui-li ui-li-static ui-btn-up-e" }); }); }
但是,最好的方法是将event
放置在循环之外,并将事件绑定到ul
,稍后ul
其委托给li。
for(var i=1; i <= 5; i++) { .... } $("ul").delegate("[id^=item]", "tap", function() { });
注意
如果要更改主题,则还需要更新一次布局。
$("ul").delegate("[id^=item]", "tap", function() {
$(this).attr({
"data-theme" : "e",
"class" : "ui-li ui-li-static ui-btn-up-e"
}).parent("ul").listview().listview("refresh");
});
利用STARTS WITH
SELECTOR
您已将其放入代码中:
var id = "item" + i;
这意味着对于5个元素的整个循环,您的ID将看起来像这样:
<li id="item1">..
<li id="item2">..
<li id="item3">..
<li id="item4">..
看看这里的共同点,我会说是:
item
因此,由于您的ID以item
开头,因此您可以使用starts with selector对其进行概括。 所以,
id^=item
表示您正在搜索ID以item
开头的元素。 由于它是一个属性,
[id^=item]
更加模块化的方法
此方法涉及较少的HTML:
//your ul tag
var ul = $("ul")
//set up an array for adding li to it.
var li = [];
//a temporary element to store "li"
var $li;
for(var i=1; i <= 5; i++) {
//add required attributes to the element
var $li = $("<li/>", {
"data-theme" : "d",
"id" : "item" + i,
"html" : "Item " + i
});
//push that into array
li.push($li);
}
//wait for append to finish
ul.append(li).promise().done(function () {
//wait for list to be added - thats why you wait for done() event in promise()
//add the click events to this - event delegation - this way your click event is added only once
$(this).on("tap", "[id^=item]", function () {
$(this).attr({
"data-theme" : "e",
"class" : "ui-li ui-li-static ui-btn-up-e"
}).parent("ul").listview().listview("refresh");
});
//then refresh
$(this).listview().listview("refresh");
});
这是一个演示: http : //jsfiddle.net/hungerpain/TdHXL/
希望这可以帮助!
只需将事件处理程序移至for循环之外即可。
并更换
$(document).delegate("#"+id, "tap", function() {
同
$(document).delegate("[id*=item], "tap", function() {
JS
for (var i = 1; i <= 5; i++) {
var id = "item" + i;
var li = $("<li data-theme=\"d\" id=\"" + id + "\">Item " + i + "</li>");
li.appendTo(ul);
}
$(document).delegate("[id*=item]", "tap", function () {
$("#" + id).attr({
"data-theme": "e",
"class": "ui-li ui-li-static ui-btn-up-e"
});
});
这是我要做的:
var items = []; // an actual JavaScript array - a list of items.
for(var i=1;i<=5;i++){
items.push({theme:'d'}); //add an item to our list,
//Anything that actually relates to the item should be
//here, text, other data and such. This is our 'view model'.
}
items.forEach(function(item,i){ // for each item, bind to the dom
var el = document.createElement("li"); //create an element
el.textContent = i+1; // set its text
el.onclick = function(e){ // or ontap or whatever
el.className = "ui-li ui-li-static ui-btn-up-e";
item.theme = "d";
}//you mind want to use addEventListener instead at a later point
item.el = el;
ul.appendChild(el); // you need access to ul, currently being a jQuery object ul[0].
});
请注意,我们可以直接从我们的代码访问这些项目,我们可以直接对其进行更新,并直接对其进行引用。 我们不需要查询我们自己的数据 -我们拥有它并直接知道如何获取它。
另外-我们没有80kb的依赖关系。 没有复杂的选择器,没有“魔术”绑定。 一切都很简单,只是简单的javascript。
注意:对于较旧的浏览器,应该轻松填充forEach。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.