Select2 和 Datetimepicker 在克隆中不起作用 div

Question

我用 jquery 克隆了 div，其中包含 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>

我还在我的 javascript 代码中添加了 $('.date-picker').datepicker(); 和 $(".mySelect2").select2();。

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

Answer 1

克隆后必须重新初始化元素。所以在创建函数中添加下面两行

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

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

Answer 2

您需要在新添加的元素上初始化这些插件，因为当您初始化时（在文档就绪处理程序中）这些元素不存在（在 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();
}

Select2 和 Datetimepicker 在克隆中不起作用 div

Select2 and Datetimepicker does not work in cloned div

javascript

jquery

datetimepicker

jquery-select2