将事件绑定到列表元素

Question

我使用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" }); 
     }); 
    } 

窃听的任何元素时，该代码会触发，但它始终修改列表因为某些原因最后一个元素。

Answer 1

你的选择

• 上移事件处理到循环之外

  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稍后将其委托给力。

  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">.. 

在COM展望周一在这里的事情，我会说这是：

item 

所以，既然你的IDS开始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/

希望这有助于！

Answer 2

只需将事件处理程序移至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" 
    }); 
}); 

Answer 3

这是我会怎么做：

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对旧版浏览器（容易）被垫高。