행을 추가 할 때 Datepicker가 작동하지 않습니다.

두 개의 날짜 선택 도구와 새 행을 추가하는 옵션이있는 테이블이 있습니다. 문제는 datepicker가 작동하지 않는 새 행을 추가 할 때입니다. 행을 추가 할 때 Datepicker가 작동하지 않습니다.

나는 당신은 아마 새로 추가 된 요소 datepicker() 호출되지 않은 https://jsfiddle.net/3uhkeq1h/2/

<script> 
$(document).ready(function() { 

    $('.txtDate22').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 

    $(".txtDate22").focus(function() { 
     $(".ui-datepicker-calendar").hide(); 
     $("#ui-datepicker-div").position({ 
      my: "center top", 
      at: "center bottom", 
      of: $(this) 
     }); 
    }); 

    $(".txtDate22").blur(function() { 
     $(".ui-datepicker-calendar").hide(); 
    }); 
}); 

</script>

출처

2016-09-19 anatp_123

Datepicker가 새로 생성 된 요소를 바인딩하지 않습니다. 귀하의 답변을 업데이트했습니다. 내가 수행 한 유일한 변경 사항은로드중인 요소를 별도의 함수에 넣고 클릭시뿐만 아니라로드시 호출하는 것입니다.

function date_picker(){ 
$('.txtDate').datepicker({ 

     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 
    $('.txtDate22').datepicker({ 
     changeMonth: true, 
     changeYear: true, 
     dateFormat: 'MM yy', 
      showButtonPanel: true, 

     onClose: function() { 
      var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val(); 
      var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
      $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      $(this).datepicker('refresh'); 
     }, 

     beforeShow: function() { 
      if ((selDate = $(this).val()).length > 0) { 
       iYear = selDate.substring(selDate.length - 4, selDate.length); 
       iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5), $(this).datepicker('option', 'monthNames')); 
       $(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1)); 
       $(this).datepicker('setDate', new Date(iYear, iMonth, 1)); 
      } 
     } 
    }); 
}

이와 비슷한 작업을 추가하려는 경우 여기에서 해당 작업을 추가하십시오.

출처

2016-09-19 19:48:37

변경 사항을 잘 모르시겠습니까? –

@ anatp_123 업데이트 된 jsfiddle –

음을 확인하십시오.이 말은 https://jsfiddle.net/3uhkeq1h/2/입니다. –

만들었습니다. 동일한 클래스 일지라도 나중에 DOM에 추가 된 요소에 대해 함수가 자동으로 호출되지 않습니다.

출처

2016-09-19 19:44:24 Arthur

행을 추가 할 때 Datepicker가 작동하지 않습니다.

답변

관련 문제