0

我正在创建 2 个可排序列表，该列表中的项目使用 append() 添加。一切正常，但我需要让项目在点击时在列表之间移动。

我不明白为什么 li 上的点击事件不起作用。

这是代码：

附加

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

通过点击移动

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

我错过了什么？

非常感谢

4

5 回答 5

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");
});
于 2013-11-11T11:09:50.840 回答
0

尝试查找类似

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

甚至你可以使用类似delegate的方法click event

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

确保您已将代码放入dom ready

于 2013-11-11T11:09:44.683 回答
0 
$(document).on('click', '.contact_li', function () {
    console.log("click detected");
});
于 2013-11-11T11:10:11.410 回答
0

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

改变这个：

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

to this:

$("#availble_contacts").on('click', '.contact_li', function () {
于 2013-11-11T11:10:26.713 回答
0

you'd better bind the click event on the ul rather than the li, and detect the exact li by the "target" of the "event".

$("#availble_contacts").on("click",function(event){
    var e = event || window.event;
    var target = e.target || e.srcElement;
    console.log("you clicked "+target);
})
于 2013-11-11T11:21:07.470 回答