$ .clone（）＆$ .data（）奇怪的行爲

有人可以向我解釋爲什麼，當我用jquery .clone()克隆一個元素時，將其存儲在$(windows).data('myclone')中並將此克隆數據元素附加到另一元素，克隆數據存在在$(windows).data('myclone')的變化？（指向我在html檢查器中新創建的元素）

<li class="clone"> 
    <button class="file-list-delete"><a href="#">clone this</a> 
    </button> 
    <input type="file" size="30" id="files" multiple="multiple" name="files" class="upload-files"> 
</li> 
<button id="append">append clone</button> 

<script> 
    $('.clone button').on('click', function() { 
     var cloneNode = $(this).parent().clone(); 
     $(window).data('cloneNode', cloneNode); 
     console.log(cloneNode); 
    }); 
    $('#append').on('click', function() { 
     console.log($(window).data('cloneNode')); 
     var clone = $(window).data('cloneNode'); 
     $('.clone').after(clone); 
    }); 
</script>

這是一個小提琴，可以在您的控制檯中看到它。首先創建的元素只是克隆的數據，然後當你追加它時，它會改變它 http://jsfiddle.net/50eu0bnp/

來源

2014-09-26 Holmeron

這可能是因爲它們是同一個對象，所以在追加（）它時不會再被克隆。 – 2014-09-26 14:21:03

究竟是什麼_changes_？ – Spokey 2014-09-26 14:25:32

應該指出的是，一個LI只能是一個列表中的一個孩子，並且一個錨點不能存在於一個按鈕中。另外，你正在創建一個節點，在jQuery的數據中存儲對它的引用，然後你試圖將該節點插入到它自己之後，這當然不起作用，即使它做到了，它也是相同的元素，所以它被移動了，移動它後會導致完全相同的標記等。 – adeneo 2014-09-26 14:36:53

您需要克隆克隆，否則您正在重複使用相同的元素。

您還需要僅定位其中一個元素，或者在每個現有的class="clone"元素之後複製元素，這會導致創建其他副本。

的jsfiddle：http://jsfiddle.net/TrueBlueAussie/50eu0bnp/1/

$('.clone button').on('click',function(){ 
    var cloneNode = $(this).parent().clone(); 
    $(window).data('cloneNode',cloneNode); 
}); 
$('#append').on('click',function(){ 
    var clone = $(window).data('cloneNode').clone(); // Clone the clone 
    $('.clone:last').after(clone); 
});

如果克隆可以改變的元素（他們不這樣做的那一刻），你需要轉移委託的事件處理程序的原始$('.clone button')沒有連接到新副本： http://jsfiddle.net/TrueBlueAussie/50eu0bnp/3/

$(document).on('click', '.clone button', function() { 
    var cloneNode = $(this).parent().clone(); 
    $(window).data('cloneNode', cloneNode); 
});

您還需要解決重複id="files"的問題，因爲這是一個完整的禁忌。 jQuery只能看到第一個（例如$('#files')），因爲id必須是唯一的。

來源

2014-09-26 14:36:36

感謝你和Matteo Tassinari的評論，我解決了我的問題。很抱歉，關於id ='files'，我做了一些代碼的快速複製/粘貼以快速創建小提琴，但是在我的代碼中沒有這個「複製的id問題」 – Holmeron 2014-09-26 16:02:26

好吧，我的第一步是刪除ID屬性，以支持類屬性。從jQuery.com：

「注意：使用.clone（）具有生產要素與重複ID屬性，它應該是唯一在哪裏可能，建議避免克隆元素與副作用。這屬性或使用類屬性作爲標識符。「

當您使用.clone(true)時會發生什麼？這是一個「深層複製」。

來源

2014-09-26 14:22:33 Scott

好的建議，但不是問題的真正原因或答案。最適合作爲評論。 – 2014-09-26 14:33:48

$('.clone button').on('click', function() { 
    var cloneNode = $(this).parent().clone(); 
    $(window).data('cloneNode', cloneNode); 
    console.log(cloneNode);

當您抓住$（'。clone button'）時，您正在抓取文檔中的每個克隆按鈕。搶一個。

$('.clonebutton')[0].on(...)

來源

2014-09-26 14:49:53 jollarvia

$ .clone（）＆$ .data（）奇怪的行爲

回答

相關問題