Question

将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的解决方案，并提供一些解释，你做了什么？

谢谢！

Answer 1

通过在公共父元素上使用单个委派的单击处理程序，可以节省将处理程序重新应用于所有附加元素的需要。

首先修改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

Answer 2

为了复制事件处理程序，您应该在克隆方法中发送true：

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

将jquery重新应用于克隆对象

2 个答案: