[JQUERY] 동적으로 생성 된 요소에 날짜 선택기 ()를 넣어 - JQuery와 / JQueryUI

동적으로 생성 된 요소에 날짜 선택기 ()를 넣어 - JQuery와 / JQueryUI

해결법

1. ---

   1.여기에 트릭은 다음과 같습니다

   여기에 트릭은 다음과 같습니다

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

   데모

   $ ( '... 선택 ...')에 ( '.. 이벤트 ..', '... 또 다른-선택 ...'... 콜백 ...).; 구문 수단 : 이벤트 ..event에 대한에 ... 선택 리스너 .. (예에서 몸을) 추가 .. (우리의 예에서 '초점'). (우리의 예에서 .datepicker_recurring_start) 셀렉터 ... 다른 선택기를 일치 ... 정합 노드의 모든 자손 이벤트 핸들러 ... 콜백 (예에서는 인라인 함수)를 적용

   참조 http://api.jquery.com/on/ 특히 "위임 이벤트"에 대한 절

2. ---

   2.나를 위해 아래 JQuery와 일했다 :

   나를 위해 아래 JQuery와 일했다 :

   문서에 "몸을"변경

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

   우주복 덕분에

   참고 : 메이크업은 확실히 당신의 ID는 각 필드에 대해 다른

3. ---

   3.skafandri +1 우수 답변

   skafandri +1 우수 답변

   이것은 단지 hasDatepicker 클래스를 확인하기 위해 업데이트됩니다.

   $('body').on('focus',".datepicker", function(){
   
       if( $(this).hasClass('hasDatepicker') === false )  {
           $(this).datepicker();
       }
   
   });
   

4. ---

   4.있는지 확인 .date 피커 클래스와 요소는 이미 hasDatepicker 클래스가 없습니다. 만약 그렇다면, 심지어 시도 $ myDatepicker.datepicker ()로 재 초기화; 실패 할 것이다! 대신 당신은 할 필요가 ...

   있는지 확인 .date 피커 클래스와 요소는 이미 hasDatepicker 클래스가 없습니다. 만약 그렇다면, 심지어 시도 $ myDatepicker.datepicker ()로 재 초기화; 실패 할 것이다! 대신 당신은 할 필요가 ...

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

5. ---

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

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

   나는 DOM에 요소를 추가하고 호출의 콜백 메소드에 그렇게 추천 할 것입니다.

   그래서 당신은, 당신은 같은 것을 할 것 소스의 요소를 끌어와 DOM에로드 할 JQuery와로드 방법을 사용한다고 가정 할 수 있습니다 :

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

6. ---

   6.동적 요소를위한 새로운 방법이 MutationsObserver .. 다음 예는 사용 (_.each) underscore.js 함수를 사용한다.

   동적 요소를위한 새로운 방법이 MutationsObserver .. 다음 예는 사용 (_.each) underscore.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
   });
   

7. ---

   7.이것은 (JQuery와 날짜 선택기를 사용하여) 나를 위해 일한 무엇을했다 :

   이것은 (JQuery와 날짜 선택기를 사용하여) 나를 위해 일한 무엇을했다 :

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

8. ---

   8.다른 솔루션 아무도 나를 위해 일하지 않는다. 내 응용 프로그램에서 나는 jQuery를 사용하여 문서에 날짜 범위 요소를 추가하고있어 한 다음에 날짜 선택기를 적용. 어떤 이유로 일 이벤트 솔루션의 없음 그래서.

   다른 솔루션 아무도 나를 위해 일하지 않는다. 내 응용 프로그램에서 나는 jQuery를 사용하여 문서에 날짜 범위 요소를 추가하고있어 한 다음에 날짜 선택기를 적용. 어떤 이유로 일 이벤트 솔루션의 없음 그래서.

   이 마지막 일 것입니다 :

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

   이 세트 나에게 조금 백업하기 때문에이 사람을 도움이되기를 바랍니다.

9. ---

   9.동적 입력 형식을 변경하려면 수 있도록, 자바 스크립트 함수에서 클래스 .datepicker을 추가 할 수 있습니다

   동적 입력 형식을 변경하려면 수 있도록, 자바 스크립트 함수에서 클래스 .datepicker을 추가 할 수 있습니다

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

10. ---

    10.나는 피하려면 @skafandri 답을 수정 한 재 적용 .datepicker_recurring_start 클래스 모든 입력에 날짜 선택기 생성자를.

    나는 피하려면 @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);
    });
    

    여기에 작동하는 데모입니다

11. ---

    11.이 JQuery와 1.3에 나를 위해 일한 무엇이며, 첫 번째 클릭 / 초점에 표시되고

    이 JQuery와 1.3에 나를 위해 일한 무엇이며, 첫 번째 클릭 / 초점에 표시되고

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

    귀하의 의견은 클래스의 mostrar_calendario '을 가지고이 필요

    라이브 새 버전이 "을"이 적응해야 할 JQuery와 1.3 이상입니다

    여기에 차이 http://api.jquery.com/live/에 대해 더보기

12. ---

    12.

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

from https://stackoverflow.com/questions/10433154/putting-datepicker-on-dynamically-created-elements-jquery-jqueryui by cc-by-sa and MIT license