無法克隆元素以保留原始事件

Question

我正在嘗試克隆傳遞給函數的元素以及與之關聯的所有事件，因為有像這樣的$('.example').on('click', function(e) ... )}事件准備好在文檔中定義。

因此，我執行以下操作：

$('.example').on('click', function(e) {
        e.preventDefault();
        surpriseMe($(this));
});

並且我嘗試在此處沿其事件克隆此元素（我需要抓住父元素，因為.html()僅返回內部html，因此返回元素本身）：

function surpriseMe(element) {

    var newElement = element.parent().clone(true,true).html();

    surprise.insertBefore(element.parent());

    if (numElements == 3) {
        newMonth = $('<li class="item-dragable-placeholder">'+ newElement +'</li>
    }  

}

我相信.clone()內部的true, true應該強制父級也抓住其子級事件，但是每當我單擊新放置的元素時，都不會發生任何事情

Answer 1

要使用事件委托...

更改：

$('.example').on('click', function(e) { ...

至：

$(document).on('click', '.example', function(e) { ...

注意：找到頁面加載時可用的最接近的祖先元素（容器），然后使用它，而不是使用document 。

Answer 2

當您執行插入操作時，您不要求插入新元素，而是要求僅插入html，刪除html部分，它將為您提供元素及其功能。

var newElement = element.parent().clone(true,true).html();

請參見以下示例（請參見以下示例）[ http://jsfiddle.net/dshun/1j9khfnc/4/]（請注意，由於給出的示例代碼不完整。例如，變量感到驚訝，未聲明numElements。我做了一些說明。我的小提琴中的假設）

 $(document).ready(function(){
    var numElements=0;

    function surpriseMe(element) {

       var newElement = element.parent().clone(true,true);
       newElement.insertBefore( ".inner" );
       numElements++;

       if (numElements == 3) {
         newMonth = $('li.item-dragable-placeholder').insert(newElement);
       }  

    }

    $('.example').on('click', function(e) {
      e.preventDefault();
      surpriseMe($(this));
    });
});