javascript - 使用 jQuery 删除 DOM 元素不起作用

Question

我将开门见山，我正在使用 jQuery 克隆一个 div 元素，其中有一个跨度，我绑定(bind)了一个点击事件，当触发时从 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');
            }

        });
});

我可能遗漏了一些小东西，但我似乎找不到问题所在。

此外，我一直在尝试找到一种更好的克隆部分的方法，以及一种在重命名它们时遍历子元素的更好方法，目前看起来有点困惑，对此有什么想法吗？

提前致谢!

Answer 1

问题是@pharalia stated .

一种解决方案是使用 .live 来绑定(bind)您的处理程序:

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