将 jQuery 重新应用于克隆的对象

re-applying jquery to cloned objects

本文关键字：对象 应用于 jQuery      更新时间：2023-09-26

将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()
});

示例小提琴

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

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