jQuery动态添加的元素无法删除

我一直在尝试找出这个问题的解决方案，并且在网上遇到过许多类似的post，但是没有一个解决方案适用于我的特定实例。

我在一组元素中使用jQuery’inserAfter’。 我可以轻松地添加组，但是，我还有一个remove（）函数，当单击删除链接时调用，但是新添加的元素没有任何反应，即使我可以删除其他组没有问题。

我正在使用jQuery的on（）来实现click函数..但是，这仍然不适用于动态添加的元素。

要重现此问题，请转到下面的jsfiddle链接，单击“添加组”按钮，然后查看添加到DOM的黄色组。 现在，将鼠标hover在黄色组上以显示删除按钮。 点击删除按钮，tada … nothin’

这是一个例子：

http://jsfiddle.net/revive/5MFRm/

jQuery(function($) { $( "#tabs" ).tabs(); $("#group0").hide(); $('.group-content').hide(); // Hide all group-content elements function clonePanel() { var panel=$("#tabs #group0").clone(false), lastpanel = $("#tabs .group").last().index(), newid = 'group'+(lastpanel+1); panel.attr('id',newid).addClass('newpanel'); panel.insertAfter($("#tabs .group").last()).show(); } $(".add-group").on('click',function(){ clonePanel(); }); $(".delete-group").on('click',function(){ $(this).closest('.group').fadeOut('slow', function(){$(this).closest('.group').remove(); }); // alert('done'); }); $('#tabs').on('click', '.group-title-toggle',function(){ // Add class "hover" on dt when hover $(this).closest('.group-title').toggleClass('active').next().slideToggle(); // Toggle dd when the respective dt is clicked }); }); 

Answer 1

这就是你要找的： 在jQuery中，如何将事件附加到动态html元素？ 。

这是你的代码正常工作。 http://jsfiddle.net/5MFRm/2/

而不是$('.add-group').on('click', function() {})

使用这种表示法

$('body').on('click', '.add-group', function() {})

Answer 2

请使用jQuery live 。 它将侦听将来创建的所有对象。