Bootstrap Datetimepicker不能使用動態字段

Question

我有當前的代碼，這是引導datetimepicker Bootstrap 3 Datepicker，我目前的問題是，當我點擊「添加更多字段」與文本字段與新datetimerpicker不工作，對它可能是什麼想法？

<script type="text/javascript"> 
    $(document).ready(function() { 
     var max_fields  = 5; //maximum input boxes allowed 
     var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
     var add_button  = $(".add_field_button"); //Add button ID 

     var x = 1; //initlal text box count 
     $(add_button).click(function(e){ //on add input button click 
      e.preventDefault(); 
      if(x < max_fields){ //max input box allowed 
       x++; //text box increment 
       $(wrapper).append('<div>\ 
        <div class="input-group date datepicker_init">\ 
         <input class="form-control" type="text" name="mytext[]">\ 
         <span class="input-group-addon">\ 
          <span class="glyphicon glyphicon-calendar"></span>\ 
         </span>\ 
        </div>\ 
        <div class="input-group date datepicker_end">\ 
         <input class="form-control" type="text" name="mytext[]">\ 
         <span class="input-group-addon">\ 
          <span class="glyphicon glyphicon-calendar"></span>\ 
         </span>\ 
        </div>\ 
        <a href="#" class="remove_field red-color">Remove</a>\ 
       <div class="voffset10"></div>\ 
       </div>\ 
       '); 
      } 
     }); 

     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 

$('.datepicker_init').datetimepicker({ 
    locale: 'es', 
    format: 'YYYY-MM-DD HH:mm' 
}); 

$('.datepicker_end').datetimepicker({ 
    locale: 'es', 
    format: 'YYYY-MM-DD HH:mm', 
    useCurrent: false 
}); 

$(".datepicker_init").on("dp.change", function (e) { 
    $('.datepicker_end').data("DateTimePicker").minDate(e.date); 
}); 

$(".datepicker_end").on("dp.change", function (e) { 
    $('.datepicker_init').data("DateTimePicker").maxDate(e.date); 
}); 
}); 
</script> 

<div class="form-group"> 
    <div class="input_fields_wrap"> 
     <button class="add_field_button btn btn-info btn-block voffset10">Add More Fields</button> 
     <div> 
      <div class='input-group date datepicker_init'> 
       <input class="form-control" type="text" name="mytext[]"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
      <div class='input-group date datepicker_end'> 
       <input class="form-control" type="text" name="mytext[]"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
     <div class="voffset10"> 
    </div> 
</div> 

更新部分

$(".datepicker_init").on("dp.change", function (e) { 
     $('.datepicker_end').data("DateTimePicker").minDate(e.date); 
    }); 

    $(".datepicker_end").on("dp.change", function (e) { 
     $('.datepicker_init').data("DateTimePicker").maxDate(e.date); 
    }); 

Answer 1

呼的一下處理程序中的日期選擇器的init腳本，新的HTML被追加之後，像這樣：

$(add_button).click(function(e){ 
    // on add input button click 
    e.preventDefault(); 

    // max input box allowed 
    // Reduce nesting! 
    if(x >= max_fields){ 
     return 
    } 

    //text box increment 
    x++; 
    var tmp = $(wrapper).append('<div>\ 
     <div class="input-group date datepicker_init">\ 
      <input class="form-control" type="text" name="mytext[]">\ 
      <span class="input-group-addon">\ 
       <span class="glyphicon glyphicon-calendar"></span>\ 
      </span>\ 
     </div>\ 
     <div class="input-group date datepicker_end">\ 
      <input class="form-control" type="text" name="mytext[]">\ 
      <span class="input-group-addon">\ 
       <span class="glyphicon glyphicon-calendar"></span>\ 
      </span>\ 
     </div>\ 
     <a href="#" class="remove_field red-color">Remove</a>\ 
    <div class="voffset10"></div>\ 
    </div>'); 

    // Init the new pickers 
    $('.datepicker_init', tmp).datetimepicker({ 
     locale: 'es', 
     format: 'YYYY-MM-DD HH:mm' 
    }); 

    $('.datepicker_end', tmp).datetimepicker({ 
     locale: 'es', 
     format: 'YYYY-MM-DD HH:mm', 
     useCurrent: false 
    }); 
}); 

Answer 2

首先，你的DateTimePicker當$（document）.ready發生不在動態div創建時間時發生在div上的綁定，因爲add_button單擊事件創建您的動態div，這次不綁定datetimepicker。因此，在創建動態div後，您必須同時爲此div綁定datetimepicker。下面的變化可以幫助你understand-

將你的下面的代碼的任何功能，在這兩個時間，即在時間的document.ready和DIV創建時間

function yourfunction(){ 
     $('.datepicker_init').datetimepicker({ 
      locale: 'es', 
      format: 'YYYY-MM-DD HH:mm' 
     }); 
     $('.datepicker_end').datetimepicker({ 
      locale: 'es', 
      format: 'YYYY-MM-DD HH:mm', 
      useCurrent: false 
     }); 
    } 

所以最後你的腳本看起來像調用這個函數這

$(document).ready(function() { 
     var max_fields  = 5; //maximum input boxes allowed 
     var wrapper   = $(".input_fields_wrap"); //Fields wrapper 
     var add_button  = $(".add_field_button"); //Add button ID 

     var x = 1; //initlal text box count 
     $(add_button).click(function(e){ //on add input button click 
      e.preventDefault(); 
      if(x < max_fields){ //max input box allowed 
       x++; //text box increment 
       $(wrapper).append('<div>\ 
        <div class="input-group date datepicker_init">\ 
         <input class="form-control" type="text" name="mytext[]">\ 
         <span class="input-group-addon">\ 
          <span class="glyphicon glyphicon-calendar"></span>\ 
         </span>\ 
        </div>\ 
        <div class="input-group date datepicker_end">\ 
         <input class="form-control" type="text" name="mytext[]">\ 
         <span class="input-group-addon">\ 
          <span class="glyphicon glyphicon-calendar"></span>\ 
         </span>\ 
        </div>\ 
        <a href="#" class="remove_field red-color">Remove</a>\ 
       <div class="voffset10"></div>\ 
       </div>\ 
       '); 
      } 
      yourfunction(); 
     }); 

     $(wrapper).on("click",".remove_field", function(e){ //user click on remove text 
      e.preventDefault(); $(this).parent('div').remove(); x--; 
     }) 

     yourfunction(); 

     $(".datepicker_init").on("dp.change", function (e) { 
      $('.datepicker_end').data("DateTimePicker").minDate(e.date); 
     }); 

     $(".datepicker_end").on("dp.change", function (e) { 
      $('.datepicker_init').data("DateTimePicker").maxDate(e.date); 
     }); 
    });