Как запустить несколько jQuery choosen() в той же форме, используя clone()

Question

Я хочу клонировать выбранный объект, когда пользователь нажимает кнопку. Пока мне удастся скопировать поля/выбрать поле ввода, но новые элементы, которые добавлены/клонированы, доссент реагируют на вызов choosen();

Я добавил свой код до сих пор:

HTML-код:

<select data-placeholder="Choose something" class="classname" name="somthinghere[]"> 
    <option value="123">Somthing</option> 
    <option value="124">Somthing again</option> 
</select> 

Кнопка для запуска Клон:

<button class="add_field_button btn btn-warning" data-fields="0" name="add">Add more selectfields and use the choosen plugin</button> 

Сценарий JQuery, который обрабатывает cloing выбранного элемента и вызвать выбранный объект.

<script>       
    $(document).ready(function() { 
     $(".add_field_button").click(function(e){ 
      e.preventDefault(); 

      var add_button = $(this); 
      var fieldset = add_button.closest('.fieldset-clone'); 
      var fieldset_clone; 
      var fieldset_content; 

      fieldset_clone = add_button 
          .closest('.fieldset-clone') 
          .find('.fieldset-content') 
          .eq(0) 
          .clone(); 

      fieldset_content = $('<div>') 
       .addClass('remove-button') 
       .append(fieldset_clone.children()); 

      add_button.before(fieldset_content); 
      add_remove_btn(fieldset_content); 

      $('.ny-matrett').chosen(); 
     }); 
    }); 
</script> 

Answer 1

Вам необходимо «уничтожить» выбранные вами перед клонированием. После клонирования вы можете восстановить свой выбранный вами. Вот один из способов, если я правильно понял вопрос:

https://jsfiddle.net/xgqbfth7/

HTML часть:

<div id="home"> 

    <fieldset> 
    <legend>#1 
    </legend> 
    <div class="fieldset-content"> 
     <div> 
     <select data-placeholder="Choose something" class="classname" name="somthinghere[]"> 
      <option value="123">Somthing</option> 
      <option value="124">Somthing again</option> 
     </select> 
     </div> 

     <button class="add_field_button btn btn-warning" data-fields="0" name="add">Add more selectfields and use the choosen plugin</button> 
    </div> 
    </fieldset> 

</div> 

JS часть:

var x = 1; 

$(document).ready(function() { 

    jQuery('#home select').chosen(); 
    jQuery(document).on('click', '.add_field_button', function(e) { 
    makeChosen(false); 
    x++; 
    e.preventDefault(); 
    var add_button = $(this); 
    var fieldset = add_button.closest('fieldset'); 
    var newFieldset = fieldset.clone(true, false).appendTo('#home'); 
    newFieldset.find('select').append('<option value="">Test ' + x + '</option>'); 
    newFieldset.find('legend').html(x); 
    makeChosen(true); 
    }); 
}); 

function makeChosen(status) { 
    if (status) jQuery('#home select').chosen(); 
    else { 
    jQuery('#home select').chosen('destroy'); 
    } 
}