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>

我还将$('.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

克隆元素后，必须重新初始化元素。因此，在create函数中，在下面添加两行

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中不起作用

2 个答案: