jquery append（）元素单击事件

Question

我有两个ul标签 here is jsbin link

我的脚本是

$("#to-do li").click(function(){
    alert("I'm to-do li");
    $(this).appendTo("#done");
});

$("#done li").on('click', function(){
    // this event is not fired
    alert("I'm done li");
    $(this).appendTo("#to-do");
});

并要求点击＆＃34; to-do li＆＃34; ，它应附加到＆＃34;完成li＆＃34;反之亦然。

第一个功能正常运行正常。但第二个根本没有被解雇。 点击＆＃34; #done li＆＃34;，再次调用第一个函数。 请帮忙...

1）为什么（＆＃34;＃to-do li＆＃34;）事件在点击$（＆＃34; #done li＆＃34;）时触发。 2）如何实现这个

Answer 1

由于您正在处理动态元素结构，因此需要使用事件委托

$('#to-do').on('click', "li", function () {
    console.log("I'm to-do li");
    $(this).appendTo("#done");
});

$('#done').on('click', "li", function () {
    // this event is not fired
    console.log("I'm done li");
    $(this).appendTo("#to-do");
});

演示：Fiddle