Select2 и Datetimepicker не работают в клонированном div

Question

Я клонирую div с jquery, который содержит textarea, select2 и datatimepicker. Но клонированный select2 и datetimepicker не работают.

<div id= "myDiv">
    <textarea id="myTextArea"></textarea>
    <select class="mySelect2">
       <option value="1">1</option>
       <option value="2">1</option>
    </select>
    <div class="date date-picker" data-date-format="dd.mm.yyyy">
        <input type="text" readonly></div>
    </div>
</div>

Я также добавил $('.date-picker').datepicker(); и $(".mySelect2").select2(); в свой код JavaScript.

function create() {
    $("#myDiv  div:first").clone().find("textarea select input").each(function () {
        $(this).val('');
    }).end().appendTo("#myDiv");
}

Answer 1

Вам нужно инициализировать эти плагины на вновь добавленных элементах, поскольку этих элементов не было (в DOM), когда вы инициализировали (в обработчике готовности документа).

function create() {
    // cache the element reference
    let $ele = $("#myDiv  div:first").clone().find("textarea select input").each(function () {
        $(this).val('');
    }).end().appendTo("#myDiv");

    // get select and input element and initialize corresponding plugin
    $ele.filter('.date-picker').datepicker(); 
    $ele.filter(".mySelect2").select2();
}

Answer 2

Вы должны повторно инициализировать элементы после их клонирования.Итак, в функцию создания добавьте две строки ниже

function create() {
    $("#myDiv  div:first").clone().find("textarea select input").each(function () {
        $(this).val('');
    }).end().appendTo("#myDiv");

    $('.date-picker').datepicker(); 
    $(".mySelect2").select2();
}