如何克隆元素及其關聯的事件回調？

我克隆一個元素並將其添加到DOM。我預計新創建的克隆元素中的this將引用自身，但它似乎是指原始的克隆元素。如何克隆元素及其關聯的事件回調？

爲了說明，我創建了以下腳本。通過點擊「cloneIt」，添加一個新元素，並在點擊新元素時，this引用原始的克隆。我的願望是爲data('type')顯示「添加」。

如何克隆元素並使回調與新克隆的對象有關？

$('.fileupload').fileupload({ 
    start: function (e, data) { 
     console.log('start', this, $(this).parent().data('type')); 
    } 
}) 
    .on('fileuploadsubmit', function (e, data) { 
    console.log('fileuploadsubmit', this, $(this).parent().data('type')); 
}); 

$('#cloneIt').click(function() { 
    $('#clone').clone(true).removeAttr('id').data('type', 'added').appendTo('#container'); 
}); 

#clone { 
    display:none; 
} 

<button id="cloneIt">cloneIt</button> 
<ul id="container"> 
    <li id="clone" data-type="clone"> 
     <input class="fileupload" name="file" type="file" /> 
    </li> 
    <li data-type="existing"> 
     <input class="fileupload" name="file" type="file" /> 
    </li> 
</ul>

來源

2015-10-26 user1032531

不確定你到底在想什麼，但是如果你定義了'$（'。fileupload'）'和*然後*創建一個克隆，它將不被包含。當使用'.attr（'data-type'，'added'）'時，更改數據屬性似乎只能工作。 – Shikkediel

@Shikkediel'.attr（）'提供了相同的結果。請參閱http://jsfiddle.net/fq4rqc1u/5/。我將'$（'。fileupload'）'應用於'＃clone'以及另一個'input'，其''數據類型''存在'，並且這些似乎都起作用。但是，當我克隆時，它與現有數據值保持一致。也許某種回調函數而不是直接訪問'this'？ – user1032531

'console.log（$（this）.parent（）是什麼？index（））;'log？ –

看起來this的啓動回調的概念在調用.fileupload()時被鎖定，並且this被轉移到克隆。

就我個人而言，我會保持模板LI與活動的LI分離，並且從不調用.fileupload()。

HTML

<button id="cloneIt">cloneIt</button> 
<ul id="template"> 
    <li data-type="original"> 
     <input class="fileupload" name="file" type="file" /> 
    </li> 
</ul> 
<ul id="container"> 
    <li data-type="existing"> 
     <input class="fileupload" name="file" type="file" /> 
    </li> 
</ul>

CSS

#template { 
    display:none; 
}

最初，只有輸入上調用.fileupload()在#container，並隨後在模板上的任何克隆作出後。

的Javascript

$('#container .fileupload').fileupload({ 
    start: function (e, data) { 
     console.log('start', this, $(this).parent().data('type')); 
    } 
}).on('fileuploadsubmit', function (e, data) { 
    console.log('fileuploadsubmit', this, $(this).parent().data('type')); 
}); 

$('#cloneIt').click(function() { 
    $('#template li').clone().data('type', 'clone').appendTo('#container').find('.fileupload').fileupload(...); 
});

我會建議與任何插件這種方式。克隆一個widgetized元素是危險的。克隆行爲不保證可靠。有了一些插件，你可能會擺脫它;與其他人一樣，你不會。

來源

2015-10-26 19:16:59

http://jsfiddle.net/1as47aeb/5/

好像你需要再次調用從庫中fileupload方法，創造了DOM對象之後。

如果您檢查代碼中的DOM，您會看到該屬性存在，已添加，並且可以在克隆後在原始代碼中查詢它。

編輯

更正了在克隆輸入中上傳時調用兩個輸入事件時的行爲。

來源

2015-10-26 18:51:59 Niloct

謝謝Niloct，是的，我相信這樣做會起作用。但是，似乎應該可以從最初克隆的元素訪問新創建的元素的DOM。 – user1032531

你可以。但它似乎也需要fileupload的初始化。屬性是在那裏你可以檢查DOM，評論我在代碼底部引入的文件上傳，你會看到。 – Niloct

如何克隆元素及其關聯的事件回調？

回答

相關問題