Question

如果我在应用了事件后使用.clone()克隆了一段文档，那么如果我将所有这些事件带回克隆元素将克隆的元素重新注入文档？

当我这样做时，我所有附加的事件处理程序都会丢失：

<div class="row">
    <div class="col-lg-3">Something <span class="glyphicon glyphicon-remove-circle text-danger pull-right"></div>
    <div class="col-lg-3">Something else <span class="glyphicon glyphicon-remove-circle text-danger pull-right"></div>
</div>

<script type="text/javascript">
    $('.row').delegate('.glyphicon-remove-circle', 'click', function () {
        $(this).parent().remove();
    });

    $reset = $('.row').clone();
</script>

<button onclick="$('.row').replaceWith($reset)">Reset</button>

以下是fiddle。

Answer 1

如果您打算使用委托事件，只需将其附加到不变的祖先并停止担心特定于元素的处理程序：

JSFiddle：http://jsfiddle.net/1o8jk4pf/2/

$('.container').delegate('.row .glyphicon-remove-circle', 'click', function () {
    $(this).parent().remove();
});

$reset = $('.row').clone();

如果您使用的是最新版本的jQuery，请使用on代替，例如：

$('.container').on('click', '.row .glyphicon-remove-circle', function () {
    $(this).parent().remove();
});

委托事件处理程序通过在事件冒泡到单个不变的祖先之后应用选择器来工作。因此，只有一个事件附件点，不用担心动态添加元素。

jQuery.clone（）丢失附加的事件处理程序

1 个答案: