Элемент выбора не работает после клонирования

Question

Привет! Ребята, я ничего не знаю, когда дело доходит до JQuery ... Пожалуйста, помогите мне с этим.

Я создал форму бутстрапа с кнопкой, добавив другое поле, если пользователю нужны дополнительные поля ввода. Новое поле клонируется из исходного поля.

Дата-подборщик не работал первым (на клонированном поле), поэтому я добавить код, чтобы решить, что .. (я была удачей, чтобы сделать, и это у меня ушло 7 часов, чтобы получить это правильно) ..

, но потом я обнаружил, что даже клонированный блок выбора не работает. -> Поскольку селектор использовал ID (# e1), я думал, что это была причина, поэтому я поменял его на класс (.e1). Это не помогло. -> Так что я попробовал один и тот же метод (например, как я сделал на финиковой сборщика), но это также не удалось ..

Вот код: -> В заголовке страницы

<script src="assets/js/jquery-2.0.3.min.js"></script> 

<script> 

    function cloneRow() 
    { 

     var row = document.getElementById("rowToClone"); // find row to copy 
     var num = Math.floor((Math.random() * 500) + 1); 
     var table = document.getElementById("tableToModify"); // find table to append to 

     var clone = row.cloneNode(true); // copy children too 
     clone.id = "row" + num; // change id or other attributes/contents 
     table.appendChild(clone); // add new row to end of table 
     clone.querySelectorAll('[id="id-date-picker-1"]')[0].id = "id-date-picker-" + num; //Put Unique ID 

    //For Selector 
    $(function(){ 

     $('.e1').select2(); 

     $('.clone').click(function() { 

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

      var cloned = clone.find('.e1'); 
      cloned.removeClass('select2').removeAttr('id'); 

      clone.appendTo('.elements'); 
      $(cloned).select2(); 

     }); 
    }); 


    } 
</script> 

строки к клонировать

<tbody id="rowToClone"> 
<tr> 
    <td> 

     <div class="form-group" style="width: 100%;"> 
    <select class="e1" style="width:100%;"> 
     <option value="AL" />Alabama 
     <option value="AK" />Alaska 
     <option value="AZ" />Arizona 
    </select> 

     </div> 

    </td> 

    <td> 

     <div class="form-group" style="width: 100%;"> 
    <select class="e1" style="width:100%;"> 
     <option value="VA" />Virginia 
     <option value="WA" />Washington 

    </select> 
     </div> 
    </td> 
</tr>  

- кнопка> триггер

<button type="button" onclick="cloneRow()" class="btn btn-default purple"><i class="fa fa-plus"></i> Add </button> 

-> Page Footer

//On Page Footer 

    //--Jquery Select2-- 
    $(".e1").select2(); //I added this line 
    $("#e1").select2(); 
    $("#e2").select2({ 
     placeholder: "Select a State", 
     allowClear: true 
    }); 

-> Пожалуйста, помогите мне .. Я буду признателен.

Answer 1

Пара проблем (ваш HTML для параметров недействителен), но многие плагины, которые меняют DOM, просто не любят быть клонированными. Они хранят информацию об экземпляре в элементе data и часто не возвращаются (не могут повторно использовать плагин для элементов, которые уже имеют изменения DOM).

Поскольку использование существующих строк для клонирования может стать беспорядочным, я бы предложил несколько иной подход к клонированию, который позволит избежать этих проблем.

Просто держать отдельный шаблон строку на странице, то вы можете клонировать, внутри фиктивного блока сценария:

<script id="rowToClone" type="text/template"> 
    <tr> 
     <td> 
      <div class="form-group" style="width: 100%;"> 
       <select class="e1" style="width:100%;"> 
        <option value="AL">Alabama</option> 
        <option value="AK">Alaska</option> 
        <option value="AZ">Arizona</option></select> 
      </div> 
     </td> 
     <td> 
      <div class="form-group" style="width: 100%;"> 
       <select class="e1" style="width:100%;"> 
        <option value="VA">Virginia</option> 
        <option value="WA">Washington</option></select> 
      </div> 
     </td> 
     <td> 
      <div class="form-group" style="width: 100%;"> 
       <input type="text" class="datapicker"/> 
      </div> 
     </td> 
    </tr> 
</script> 

type="text/template" неизвестна, поэтому script игнорируется всеми браузерами.

Затем клон становится таким же простым, как:

$('#clonerow').click(function(){ 
    $('#table tbody').append($('#rowToClone').html()); 
    // now apply any plugins to the new row 
}); 

JSFiddle:http://jsfiddle.net/TrueBlueAussie/j1smswmt/2/

Вот является расширенная версия с datepicker применяется к каждой новой строке:

$('#clonerow').click(function(){ 
    $('#table tbody').append($('#rowToClone').html()).find('tr:last .datapicker').datepicker(); 
}); 

JSFiddle :http://jsfiddle.net/TrueBlueAussie/j1smswmt/3/

Примечание:

• Ваши варианты в настоящее время недействительное. Вы должны приложить текст внутри соответствия <option> & </option> теги.
• Как вы используете jQuery, избегайте использования inline onclick обработчиков. Они отделяют регистрацию событий от обработчика событий без реальной выгоды. Сделайте это вместо jQuery.

Answer 2

В случае, если кто по-прежнему возникают проблемы, но все равно хотите использовать клон JQuery:

Если вы используете Bootstrap, вы на самом деле просто нужно удалить бутстраповская-выберите, а затем повторно инициализировать нормальный клонировали выберите ,

Просто добавьте эти две строки кода после того, как вы сделаете свой клон:

clone.find('.bootstrap-select').remove(); 
clone.find('select').selectpicker(); 

На основании ответа от этого вопроса Github: https://github.com/silviomoreto/bootstrap-select/issues/605