javascript - 将事件绑定(bind)到列表元素

Question

我正在使用 JQuery 动态创建一个列表，并希望将每个元素绑定(bind)到“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 事件应用于元素，而不是文档。

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

• 但是，最好的方法是将事件放在循环之外，并将事件绑定(bind)到ul，稍后将其委托(delegate)给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");
});

使用开头选择器

您已将其放入代码中:

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/

希望这有帮助!