行を追加するときにDatepickerが機能しない

Question

私は2つの日付ピッカーと新しい行を追加するオプションがあるテーブルを持っています。 問題は、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> 

Answer 1

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

このように、同様のアクションを追加する場合は、ここでそのアクションを追加してください。

Answer 2

を作成しました。それらが同じクラスであっても、DOMに後で追加される要素に対して自動的に呼び出されることはありません。