的jQuery的append（）元素点击事件

-1

我有两个UL标签 here is jsbin link 的jQuery的append（）元素点击事件

和我的剧本是

$("#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"); 
});

和要求是对的“待办事项丽”点击，就应该追加到“完成李“，反之亦然。

第一个功能正常工作正常。但第二个并没有被解雇。点击“#done li”，再次调用第一个函数。请帮忙..

1）为什么（“＃to-do li”）事件在点击$（“＃done li”）时触发。 2）如何实现这一目标

来源

2013-11-23 Chandu

通常，使用事件代理，所以看到阿伦的回答。一些阅读：http://jqfundamentals.com/chapter/events –

为什么负面的标记？这个问题有什么不对？ – Chandu

我觉得因为这个问题每周要问百次 –

既然你是在处理动态元素的结构，你需要利用事件代表团

$('#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

来源

2013-11-23 12:02:41

+1嘿arun谢谢，它的工作。但是我的脚本有什么问题？意味着为什么我们需要用$（文档）去？ – Chandu

这是因为您最初基于该项目所在的'ul'来附加事件。因此，当'li'移动时，附加到它的事件仍然与之前的'li'有关。这个方法意味着附加事件是基于包含'ul'的。 –

@ArunPJohny为了获得更好的性能，我将选择器改为'$（'＃to-do'）。on（'click'，'li'，fn）' –

的jQuery的append（）元素点击事件

回答

相关问题