Question

我的jQuery有点生疏，因此这个noob问题：

我有这个无序列表，

 <ul data-role="listview" id="list-all-forms">
 </ul>

我从JSON对象填充：

function updateChecklists(){
    requestAllForms = $.get("/list-all-forms");

    requestAllForms.promise().done(function(data){
        $.each(data,function(key, val){
            $("<li><a class='checklistObject' id='" + val.id +"'>" + val.name +"</a></li>").appendTo("#list-all-forms");
        });
        $('ul').listview('refresh');
    });
};

但是，当我尝试从列表中带有类checklistObject的链接获取click事件时，没有任何反应......

$(".checklistObject").on("click", function(){
    console.log("click on list object!");

});

如何才能启动该功能？

Answer 1

根据您何时创建事件处理程序，这些对象可能存在也可能不存在，因此事件未正确附加。您可以等到创建它们之后添加该事件处理程序或使用事件委托并将代码更改为：

$('#list-all-forms').on('click', '.checkListObject', function() {
    console.log($(this), "click on list object");
});

在将项目添加到DOM之前和之后，这将有效。

或者如评论中提到的那样：Event binding on dynamically created elements?

Answer 2

您确定在元素之后添加了jQuery监听器吗？如果没有，选择器将只添加一个点击监听器。如果您想稍后将列表项加载到列表中，则可以执行事件委派。

$("#list-all-forms").on("click", ".checklistObject", function() { console.log("click on list object!"); });

无法按类选择列表对象

2 个答案: