동적으로 내부 요소에 datepicker () 넣기 -JQuery / JQueryUI

동적으로 내부 요소에 datepicker () 넣기 -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();
});

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로드 메소드를 사용하여 소스에서 요소를 가져 오기 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를 사용하여 날짜 범위 요소를 문서에 추가 한 다음 날짜를 선택합니다. 어떤 이벤트 솔루션도 어떤 MMT 작동하지 않습니다.

이것이 마침내 작동 한 것입니다.

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

이것이 도움이되는 것을 돕기 시작합니다.

---

javascript 함수에 클래스 .datepicker를 추가 할 수 있습니다.

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

---

클래스 datepicker가있는 모든 입력에 생성 튼 다시 적용하지 않도록 @skafandri 답변을 수정했습니다 .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_calendario'클래스가 있어야합니다.

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

---

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

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

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