jQuery动态添加的元素无法删除[重复]

Question

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

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

我将 jQuery 的 on() 用于点击功能.. 但是，这仍然不适用于动态添加的元素。

要重现该问题，请转到下面的 jsfiddle 链接， 单击 ADD GROUP 按钮，可以看到添加到 DOM 的黄色组。 现在，将鼠标悬停在黄色组上以显示删除按钮。 点击删除按钮，然后，tada...没什么

这是一个例子：

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

这就是您要查找的内容：In jQuery, how to attach events to dynamic html elements?。

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

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

使用这个符号

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

Answer 2

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