Javascript 将jquery重新应用于克隆对象

将jquery重新应用于克隆对象的正确方法是什么

这里有一个我在JSFIDLE中搭建的示例：

如您所见，最初显示的框和按钮工作正常。但是，当您添加另一个元素时，“新元素”按钮不再起作用

我理解为什么会有这个问题，但是我不知道应该如何将Jquery重新应用到克隆的新元素

有人能提供jquery的解决方案并解释一下您所做的事情吗

---

谢谢

要复制事件处理程序，应在克隆方法中发送true:

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

---

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

首先，修改HTML以包含容器，在本例中为

#元素容器

：

<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>

最后，您可以将委托事件处理程序添加到新的

#元素容器中。请注意，我还使用了
toggle（）
和
同级（）
缩短了逻辑：

将事件委托给容器，这样您就不必重新绑定。谢谢！！！这正是我要找的！我想我需要使用
.on（）
，但对于如何在这个实例中使用它，我感到非常困惑。知道我可以使用
.sibbins（）
真是太棒了！
$('div.add-element').click(function(event) {
$('div.element-holder').children('div').clone(true).insertAfter($('div.element-holder'));});

<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>

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

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