Select2 и Datetimepicker не работают в клонированном div
Я клонирую 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");
}
Я использовал jQuery(document).ready(function () {$('.date-picker').datepicker(); $(".mySelect2").select2();})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы должны повторно инициализировать элементы после их клонирования. Итак, в функции создания добавьте две строки ниже
function create() {
$("#myDiv div:first").clone().find("textarea select input").each(function () {
$(this).val('');
}).end().appendTo("#myDiv");
$('.date-picker').datepicker();
$(".mySelect2").select2();
}
Спасибо, сработало, но с datetimepicker и с select2 тоже, но select2 дублируется. Первый не работает, второй работает нормально. Я должен удалить первый.
Можно ли сделать select2 без дублирующего клона?
Вы можете либо не добавлять класс при загрузке исходного HTML-кода, либо в своей функции создания сделать вызов destroy для удаления предыдущего $('#mySelect2').select2('destroy');
Вам необходимо инициализировать эти плагины для вновь добавленных элементов, поскольку этих элементов не было (в 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();
}
вам нужно их инициализировать