jQuery动态添加的元素无法删除 [英] jQuery dynamically added elements cannot be removed

问题描述

我一直在尝试解决此问题的方法，并且在线上遇到了许多类似的帖子，..但是没有针对我的特定实例的解决方案.

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

我将jQuery的on()用于click函数..但是，在动态添加的元素上仍然无法使用.

要重现该问题，请转到下面的jsfiddle链接， 单击添加组按钮，然后看到一个添加到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
    }); 

});

解决方案

这就是您要寻找的: http://jsfiddle.net/5MFRm/2/

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

使用此符号

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

I have been trying to work out a solution to this issue, and have come across many similar posts online,.. but none with solutions that worked for my particular instance.

I'm using jQuery it 'inserAfter' within a group of elements. I can add the groups easily,.. but, I also have a remove() function called when a delete link is clicked,.. but nothing happens to the newly added elements, even though I can delete the other groups without problems.

I'm using jQuery's on() for the click function.. but, that still doesn't work on the dynamically added elements.

To reproduce the issue, go to the jsfiddle link below, Click the ADD GROUP button and see a yellow group added to the DOM. Now, hover over the yellow group to show the delete button. Click the delete button and, tada... nothin'

Here is an example:

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
    }); 

});

解决方案

That is what you are looking for: In jQuery, how to attach events to dynamic html elements?.

And here is your code working properly. http://jsfiddle.net/5MFRm/2/

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

use this notation

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

这篇关于jQuery动态添加的元素无法删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！