Применить select2 к элементам в клонированном узле?

Question

Все,

У меня есть файл шаблона PHP, который генерирует скрытый 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

изменение Try

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

в

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