jQuery.clone()失去附加的事件处理程序
问题描述:
如果我在应用了事件后使用.clone()
克隆了一段文档,那么如何获得这些事件的所有都会返回克隆的元素将克隆的元素重新注入文档?jQuery.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:
我所有的附加事件处理程序,当我做到这一点都将丢失。
答
如果你还是要用委派事件,只需将它连接到一个不改变祖先和停止担心元素特有的处理程序:
的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();
});
委托事件处理程序通过在事件冒泡到单个不变祖先后应用选择器来工作。因此,只有一点事件附件,并且无需担心动态添加的元素。
+0
谢谢!它附在我的原代码中的一个不变的祖先,顺便说一句。为了简洁起见,我没有公布这部分内容。 – eComEvo 2014-09-05 22:22:08
http://api.jquery.com/clone/#clone-withDataAndEvents – 2014-09-05 21:28:17
正如Kevin B所说;阅读文档。一个简单的额外参数将解决您的问题。 – 2014-09-05 21:28:57
@Kevin B:使用委托事件,但不附加到不变的祖先,是真正的问题。甚至不需要深入克隆事件。 – 2014-09-05 21:44:26