[javascript] 동적으로 생성 된 요소에 datepicker () 넣기-JQuery / JQueryUI

Program / 글쓴이

동적으로 텍스트 상자를 만들었으며 각 텍스트 상자가 클릭시 달력을 표시 할 수 있기를 원합니다. 내가 사용하는 코드는 다음과 같습니다.

$(".datepicker_recurring_start" ).datepicker();

모든 텍스트 상자에 datepicker_recurring_start라는 클래스가 있더라도 첫 번째 텍스트 상자에서만 작동합니다.

귀하의 도움에 감사드립니다!

답변

여기에 트릭이 있습니다.

$('body').on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});​

데모

$('...selector..').on('..event..', '...another-selector...', ...callback...);구문 수단은 :
에 리스너를 추가 ...selector..합니다 ( body이벤트에 대한 우리의 예에서) ..event..(우리의 예에서 ‘초점’). 선택기와 일치하는 일치하는 노드의 모든 자손에 대해 ...another-selector...( .datepicker_recurring_start이 예에서는) 이벤트 핸들러 ...callback...(이 예에서는 인라인 함수 )를 적용합니다.

http://api.jquery.com/on/ 및 특히 ​​”위임 된 이벤트”에 대한 섹션을 참조하십시오.

답변

나를 위해 jquery가 작동했습니다.

“본문”을 문서로 변경

$(document).on('focus',".datepicker_recurring_start", function(){
    $(this).datepicker();
});

skafandri 덕분에

참고 : 각 필드마다 ID가 다른지 확인하십시오.

답변

skafandri의 우수한 답변 +1

hasDatepicker 클래스를 확인하기 위해 업데이트되었습니다.

$('body').on('focus',".datepicker", function(){

    if( $(this).hasClass('hasDatepicker') === false )  {
        $(this).datepicker();
    }

});

답변

.date-picker클래스가 있는 요소에 아직 클래스가 없는지 확인하십시오 hasDatepicker. 그럴 경우로 다시 초기화하려는 시도도 $myDatepicker.datepicker();실패합니다! 대신해야 할 일 …

$myDatepicker.removeClass('hasDatepicker').datepicker();

답변

.datepicker();다른 텍스트 상자 요소를 동적으로 만든 후에를 다시 실행해야합니다 .

DOM에 요소를 추가하는 호출의 콜백 메서드에서 그렇게하는 것이 좋습니다.

따라서 JQuery Load 메서드를 사용하여 소스에서 요소를 가져 와서 DOM으로로드한다고 가정하면 다음과 같이 할 수 있습니다.

$('#id_of_div_youre_dynamically_adding_to').load('ajax/get_textbox', function() {
  $(".datepicker_recurring_start" ).datepicker();
});

답변

동적 요소의 새로운 메소드는 MutationsObserver입니다 . 다음 예제에서는 underscore.js 를 사용하여 (_.each) 함수를 사용합니다.

MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;

var observerjQueryPlugins = new MutationObserver(function (repeaterWrapper) {

    _.each(repeaterWrapper, function (repeaterItem, index) {

        var jq_nodes = $(repeaterItem.addedNodes);

        jq_nodes.each(function () {

            // Date Picker
            $(this).parents('.current-repeateritem-container').find('.element-datepicker').datepicker({
                dateFormat: "dd MM, yy",
                showAnim: "slideDown",
                changeMonth: true,
                numberOfMonths: 1
            });

        });

    });

});

observerjQueryPlugins.observe(document, {
    childList: true,
    subtree: true,
    attributes: false,
    characterData: false
});

답변

이것은 나를 위해 일한 것입니다 (jquery datepicker 사용).

$('body').on('focus', '.datepicker', function() {
 $(this).removeClass('hasDatepicker').datepicker();
});