페이지로드 후 클래스 필드의 Datepicker 초기화가

Question

페이지가로드 된 후 여러 개의 추가 필드를 추가 할 수있는 필드가 있습니다 (교육 재 실시시 & 작업 경험 필드를 생각하십시오). this을 사용하고 있습니다.

첫 번째 필드에 datepicker를 추가 할 수 있지만 이후 추가 된 필드는 원본의 복제/필수 복제물 임에도 불구하고 datepicker에 액세스하지 않습니다. datepicker 페이지로드 또는 페이지의 단 하나의 클래스에 대한 intializes 것을 추측하고있어. 이 클래스에 의해 캡슐화 된 형태의 코드 블록에 대한

$('.input-append.date').datepicker(); 

:

그래서 페이지에 나는 날짜 선택기를 초기화합니다. 초기 페이지로드에는 정상입니다. 또한 오류가 있고 이전에 입력 한 여러 필드를 페이지가 다시로드하면 OK입니다 (오류로 반환 된 모든 필드에 대해 datepicker가 있음). 그러나 양식에 새 필드를 추가하는 다른 js 함수를 사용하면 추가 필드에 datepicker에 대한 액세스 권한이 없습니다. 나는 지금이 일을하는 법을 모르지만 아마도 더 많은 경험/지혜를 가진 누군가 나에게 힌트를 줄 수있을 것이다.

편집 : 충분한

간단한 : 나는 단순히 추가 : 새 필드를 호출하는 코드

$('.input-append.date').datepicker(); 

. 내가 모르는 최적의 솔루션에 관해서는 js를 전문으로하는 사람이라면 누구나 그 점에 대해 의견을 말할 수 있습니다. 검색 용어를 확장하면 많은 비슷한 질문이 있습니다. 그러나, 나는 지금하고있는 일에 대해 나에게 충분하다.

Answer 1

비행 중에 추가되는 요소의 경우 data-provide = "datepicker"속성을 사용하십시오. 느리게 초기화 될 것입니다. 예를 들어 입력 필드가 ajax 응답에서 올라와 있고 컨테이너 div에로드 된 경우입니다. 이 경우에 그래서 : 당신이

$('#container-div').html(ajax_response); 

같은 cotainer div에이 Ajax 응답을로드 할 때

<input type="text" data-provide="datepicker" /> 

그래서이 작동 할 때. 당신은 예를 들어 당신이 텍스트 상자를 생성하는 기능이 일부 컨테이너에 추가, JQuery와 통해 요소를 생성하고 (나는이 사건에서 일어나는 생각 ) 일부 컨테이너에 추가하는 경우 같은 방식으로

div와이 함수는 어떤 요소의 클릭 이벤트에서 호출되며 버튼이라고합시다. 다시 데이터 제공 속성이이 문제에 대한 해결책입니다. 예를 들어

function createTextBox(){ 
    var t = $('<input>').attr('data-provide','datepicker'); 
    $('#container-div').append(t); 
} 

그리고이 기능은 이런 식으로 같은 몇 가지 버튼의 클릭 이벤트에서 호출됩니다 : 한마디로

$(document).ready(function(){ 
     $('#someBtn).click(createTextBox); 
}); 

을 그 동적 요소는 문자열로 아약스 응답에오고 또는 생성되는 여부 jquery을 통해 데이터 제공 속성을 사용하여 부트 스트랩 datepicker를 설정하십시오. 이 경우 datepicker는 Bootstrap 방식으로 느리게 초기화되기 때문입니다.