javascript - 重新将jquery应用于克隆的对象

对克隆的对象重新应用jquery的正确方法是什么？?
我在jsfiddle中安装了一个示例：http://jsfiddle.net/49o6arLu/16/

<div class="hidden element-holder">
    <div class="element">
        <div class="button">Button</div>
        <div class="green-square"></div>
    </div>
</div>
<div class="element">
    <div class="button">Button</div>
    <div class="green-square"></div>
</div>
<div class="clear"></div>
<div class="add-element">Add Element</div>

$('div.button').click(function(event) {
    if($(this).parent().children('.green-square').is(':visible')) {
         $(this).parent().children('.green-square').hide();
    }else{
         $(this).parent().children('.green-square').show();
    }
});

$('div.add-element').click(function(event) {
    $('div.element-holder').children('div').clone().insertAfter($('div.element-holder'));
});

如您所见，最初显示的框和按钮工作正常。但是，当您添加另一个元素时，“新元素”按钮将不再工作。
我理解为什么会有这个问题，但是我不知道应该如何将Jquery重新应用于克隆的新元素。
有人能为jquery提供一个解决方案并解释一下您做了什么吗？
谢谢！

最佳答案

您可以通过在公共父元素上有一个委托的单击处理程序来保存将处理程序重新应用于所有附加元素的需要。
首先修改HTML以包含容器，在本例中为#element-container：

<div class="hidden element-holder">
    <div class="element">
        <div class="button">Button</div>
        <div class="green-square"></div>
    </div>
</div>
<div id="element-container">
    <div class="element">
        <div class="button">Button</div>
        <div class="green-square"></div>
    </div>
    <div class="clear"></div>
</div>
<div class="add-element">Add Element</div>

然后您可以修改Add Element按钮以附加到该容器：

$('div.add-element').click(function (event) {
    $('div.element-holder').children('div').clone().appendTo('#element-container');
});

最后，您可以将委托事件处理程序添加到新的#element-container。注意，我还使用toggle()和siblings()缩短了逻辑：

$('#element-container').on('click', 'div.button', function (event) {
    $(this).siblings('.green-square').toggle()
});

Example fiddle

关于javascript - 重新将jquery应用于克隆的对象，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28246564/