將select2應用於克隆節點中的元素？

Question

全部，

我有一個PHP模板文件，生成一個帶有3個選擇字段的隱藏div。

<div> 
    <div class="form-group accessory collapse"> 
     <select class="accessory" style="width:50%"> 
     </select> 

     <span class="input-group-addon">×</span> 

     <select class="accessoryQuantity" style="width:10%"> 
     </select> 

     <select class="accessoryType"> 
     </select> 
    </div> 

使用jQuery克隆這些節點就像這樣：

$newItem = $('.form-group.accessory.collapse').clone(); 
$newItem.removeClass('collapse'); 

然後我嘗試申請選擇2到克隆jQuery對象，像這樣，但它只是打亂了整個克隆的節點。

$newItem.select2(); 

如何將select2應用於克隆節點？

注：我試着將select2應用到隱藏的選擇，但是當你克隆它時，它會混淆select2下拉菜單。

Answer 1

我已經在過去同樣的問題，我發現解決這個問題的最好辦法是銷燬克隆之前的原始元素選擇2然後重新初始化select2和原始克隆。

例如

$original.select2('destroy'); 
var $clone = $original.clone(); 

// add the clone to the DOM, e.g. 
$clone.insertAfter($original); 

$original.select2({options}); 
$clone.select2({options}); 

整個過程非常快，所以我還沒有看到選擇2摧毀，在原來選擇重新初始化有任何問題。

Answer 2

嘗試改變

$newItem = $('.form-group. .accessory .collapse').clone(); 

到

$newItem = $('.form-group.accessory.collapse').clone();