동적으로 생성된 요소에 날짜 선택기() 배치 - JQuery/JQueryUI

동적으로 생성된 요소에 날짜 선택기() 배치 - JQuery/JQueryUI

텍스트 상자를 동적으로 만들었는데, 각 텍스트 상자가 클릭하면 달력을 표시할 수 있기를 바랍니다.사용 중인 코드는 다음과 같습니다.

$(".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();
});

스카판드리 덕분에

참고: 각 필드마다 ID가 달라야 합니다.

스카판드리의 훌륭한 답변 +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();
});

(jquery datepicker 사용) 이것이 저에게 효과가 있었습니다.

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

동적 요소에 대한 새로운 방법은 MutationsObserver입니다.다음 예제에서는 (_.각) 함수를 사용하기 위해 언더스코어.js를 사용합니다.

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
});

 $('body').on('focus',".my_date_picker", function(){
            $(this).datepicker({
                minDate: new Date(),
            });
        });

다른 어떤 해결책도 저에게 효과가 없었습니다.제 앱에서는 jquery를 사용하여 문서에 날짜 범위 요소를 추가한 다음 날짜 선택기를 적용하고 있습니다.그래서 어떤 사건 해결책도 효과가 없었습니다.

이것이 최종적으로 효과가 있었던 것입니다.

$(document).on('changeDate',"#elementid", function(){
    alert('event fired');
});

이것이 누군가에게 도움이 되길 바랍니다. 왜냐하면 이것은 저를 약간 뒤로 물러서게 했기 때문입니다.

입력 유형을 동적으로 변경할 수 있도록 Javascript 함수에 class.datepicker를 추가할 수 있습니다.

 $("#ddlDefault").addClass("datepicker");
 $(".datepicker").datetimepicker({ timepicker: false, format: 'd/m/Y', });

다시 적용하지 않도록 @skafandri 답변을 수정했습니다.datepicker 컨스트럭터.datepicker_recurring_start학생들

HTML은 다음과 같습니다.

<div id="content"></div>
<button id="cmd">add a datepicker</button>

JS는 다음과 같습니다.

$('#cmd').click(function() {
  var new_datepicker = $('<input type="text">').datepicker();
  $('#content').append('<br>a datepicker ').append(new_datepicker);
});

여기 작업 데모가 있습니다.

이것이 JQuery 1.3에서 작동했으며 첫 번째 클릭/초점에 표시됩니다.

function vincularDatePickers() {
    $('.mostrar_calendario').live('click', function () {
        $(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
    });
}

이것은 당신의 입력이 클래스 'mostrar_intervio'를 가져야 합니다.

라이브는 최신 버전의 JQuery 1.3+용입니다. 이 버전을 "on"으로 조정해야 합니다.

차이점에 대한 자세한 내용은 여기에서 확인하십시오. http://api.jquery.com/live/

$( ".datepicker_recurring_start" ).each(function(){
    $(this).datepicker({
        dateFormat:"dd/mm/yy",
        yearRange: '2000:2012',
        changeYear: true,
        changeMonth: true
    });
});

언급URL : https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui