Question

我正在创建2个可排序列表，该列表中的项目添加了append（）。一切正常，但我需要点击列表之间的项目。

我无法理解为什么li上的点击事件无效。

以下是代码：

追加

$("#availble_contacts").append("<li class='contact_li'>" + contact + "</li>");

点击移动

$('.contact_li').on('click', function () {
    console.log("click detected");
});

我缺少什么？

非常感谢

Answer 1

由于contact_li是动态添加的，因此您需要使用event delegation来注册事件处理程序

// New way (jQuery 1.7+) - .on(events, selector, handler)
$('#availble_contacts').on('click', '.contact_li', function() {
    console.log("click detected");
});

Answer 2

尝试使用find

$('#availble_contacts').find('.contact_li').on('click', function () {
    console.log("click detected");
});

甚至您可以使用delegate方法{/ 1}}

click event

确保您已将代码放入$('#availble_contacts').on('click', '.contact_li', function () { console.log("click detected"); });

Answer 3

$(document).on('click', '.contact_li', function () {
    console.log("click detected");
});

Answer 4

在.contact_li中查看你的lis是动态创建的元素，因此js事件的直接绑定不会附加到它，所以你可以将事件委托给最接近的静态父类，例如"#availble_contacts"：

改变这个：

$('.contact_li').on('click', function () {

到此：

$("#availble_contacts").on('click', '.contact_li', function () {

Answer 5

你最好在ul而不是li上绑定click事件，并通过“event”的“target”检测确切的li。

$("#availble_contacts").on("click",function(event){
    var e = event || window.event;
    var target = e.target || e.srcElement;
    console.log("you clicked "+target);
})

检测单击添加了.append的可排序项目

5 个答案: