동적 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>