jQuery.clone（）失去附加的事件處理程序

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

委託事件處理程序通過在事件冒泡到單個不變祖先後應用選擇器來工作。因此，只有一點事件附件，並且無需擔心動態添加的元素。