Проблема с динамическим созданием DOM

Question

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

[Пожалуйста, проверьте этот код] [1]

$("#datepicker").datepicker(); 
 

 

 
$("button").click(function(){ 
 
    
 
    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />'); 
 
    
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div> 
 
<button>Add input again </button>

depen.io/anon/pen/adLzi

Answer 1

$("button").click(function(){ 

    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />'); 

    // move to here your cod 
    $("#datepicker").datepicker(); 

}); 

$ (". add"). html (...) означает удаление и создание нового объекта DOM

затем потерянное значение $ ("# datepicker"). Datepicker();

Answer 2

Попробуйте

$("button").click(function(){ 
    $("#datepicker").val(""); 
    $("#datepicker").focus(); 
}); 

Demo

Answer 3

При нажатии на кнопку, это код, который выполняется:

$("button").click(function(){ 
    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />'); 
}); 

Что это делает это заменяет datepicker на новый. Ничего плохого, за исключением того, что связанное событие имеет проблему, повторно подключающую его.

TL: DR, используйте этот код:

$("button").click(function(){ 
    var el = $('#datepicker'); 
    $.datepicker._clearDate(el); 
}); 

Редактировать

Даже я не знаю точные причины, почему это происходит, но это, вероятно, потому, что внутри, JQuery UI не имеет никакой связи предыдущего элемента DOM, и он остается висящим. Это также приводит к утечкам памяти.

Answer 4

Попытка переместить плагин инициализации в вашей document.ready функции:

$(document).ready(function() { 
$("#datepicker").datepicker();` 
}); 

$("button").click(function(){ 
 
    
 
    $(".add").html('<input id="datepicker" placeholder="click here to open calendar " type="text" />'); 
 
    
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='add'><input id="datepicker" placeholder="click here to open calendar " type="text" /></div> 
 
<button>Add input again </button>