0

我正在使用 JQuery 动态创建一个列表，并希望将每个元素绑定到一个“点击”事件。我该怎么做？这是我正在尝试做的一个示例，但它不起作用。

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

此代码在点击任何元素时触发，但由于某种原因它总是修改列表中的最后一个元素。

4

3 回答 3

3

您的选择

  • 要么将事件处理移到循环外

    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稍后将其委托给 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选择器的使用

您已将其放入代码中：

var id = "item" + i;

这意味着对于 5 个元素的整个循环，您的 id 将如下所示：

<li id="item1">..
<li id="item2">..
<li id="item3">..
<li id="item4">..

看看这里的共同点，我想说的是：

item

因此，由于您的 id 以开头，您可以通过使用以 selector 开头item的开头来概括它。所以，

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/

希望这可以帮助！

于 2013-07-09T21:11:11.473 回答
1

这是我要做的：

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 的依赖。没有复杂的选择器，没有“魔法”绑定。一切都是直截了当的，它只是普通的 ol' javascript。

注意：对于较旧的浏览器，应该（轻松地）填充 forEach。

于 2013-07-09T21:22:08.687 回答
1

只需将事件处理程序移到 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"
    });
});
于 2013-07-09T21:04:32.920 回答