将 jquery 重新应用到克隆的对象

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

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

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

Answer 2

您可以通过在公共父元素上使用单个委托点击处理程序来避免将处理程序重新应用于所有附加元素的需要。

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

将 jquery 重新应用到克隆的对象

re-applying jquery to cloned objects

html

javascript

jquery