javascript - 绑定(bind)列表元素以点击 JQuery Mobile

Question

我有一个使用 JQuery Mobile 呈现简单列表的函数。

function() {
    var view = $("#test-content");
    view.empty();
    console.log(view);
    var ul = $("<ul></ul>").appendTo(view);

    for(var i=1; i <= 5; i++) {
        $("<li id=\"item" + i + "\">Item " + i + "</li>").appendTo(ul);
    }
    ul.listview();
}

如何绑定(bind)每个元素，以便在点击时改变主题？

我尝试在 for 循环中添加以下代码，但它没有做任何事情。

$("#item" + i).bind("tap", function() {
            $(this).attr("data-theme", "e"); 
        });

Answer 1

您错过了 # for id 选择器还确保在绑定(bind)事件之前添加具有 id item 的元素。

$("#item" + i).bind("tap", function() {
        $(this).attr("data-theme", "e");     
});

您可以对动态添加的元素使用 on()。您可以将事件委托(delegate)给动态添加元素的父级或 document。

$(document).on("tap", "id^=item", function() {
     $(this).attr("data-theme", "e"); 
});