Question

我会直截了当地说，我正在使用jQuery克隆一个div元素，其中包含一个span，我绑定了一个click事件，当触发时会从DOM中删除刚刚克隆的部分，现在第一部分工作正常，但由于某种原因，一旦创建克隆部分就不会删除它们，这是我的代码，

HTML：

<div id='wrapper'>
<div id="mail">
<div class="container" id="email">
    <label for="email_address">Email address: </label>
    <div>
        <input type="text" name="email_address" id="email_address"  />
        <span class="remove"></span>
    </div>
</div>
</div>
<div class="container">
    <input type="button" id="button" name="button" value="click me" />
</div>
</div>

jQuery的：

$(document).ready(function() {

        $("span.remove").click(function(){
            $(this).parents("div.container").remove();
        });


        var count = 0;

        $('#button').attr('disabled','');
        $('#button').click(function(){
            count++;
            alert(count);
            var test = $('#email.container').clone().attr('id', 'email_' + count).appendTo('#mail');
            test.children(':nth-child(2)').children(':first').attr('id', 'mail_' + count);

            if(count == 3){
                $('#button').attr('disabled','disabled');
            }

        });
});

我可能错过了一些小事，但我似乎无法找到问题。

另外，我一直在努力找到克隆这些部分的更好方法，并且在重命名时更好地遍历子元素，目前看起来有点乱，有什么想法吗？

提前Thanx！

Answer 1

问题是@pharalia stated。

解决方案是使用.live来绑定处理程序：

    $("span.remove").live('click', function(){
        $(this).parents("div.container").remove();
    });

Answer 2

DOM事件不会与元素一起复制，而是在加载时附加事件。您需要在创建事件时将事件附加到克隆元素/子项。

Answer 3

你可以在那里使用.clone(true)。它还会复制绑定到元素的事件。如果没有true作为参数，则不会复制该事件。

demo

使用jQuery删除DOM元素无法正常工作

3 个答案: