JQuery клон() вопрос

Question

Вот моя полная дата и время HTML таблицы:

<div class="addmore_box_date"> 
    <div class="row"> 
     <div class="col-xs-6 col-sm-4 col-md-4">    
       <input type='text' name="add_date[]" class="form-control" id="add_date" placeholder="Select date"> 
      </div> 
      <div class="col-xs-6 col-sm-4 col-md-4"> 
      <select class="form-control add_time" id="add_time" name="add_time[]"> 
       <option value="">Select time</option> 
       <option value="12:00 Am">12:00 Am</option> 
       <option value="1:00 Am">1:00 Am</option> 
       <option value="2:00 Am">2:00 Am</option> 
       <option value="3:00 Am">3:00 Am</option> 
       <option value="4:00 Am">4:00 Am</option> 
       <option value="5:00 Am">5:00 Am</option> 
       <option value="6:00 Am">6:00 Am</option> 
       <option value="7:00 Am">7:00 Am</option> 
       <option value="8:00 Am">8:00 Am</option> 
       <option value="9:00 Am">9:00 Am</option> 
       <option value="10:00 Am">10:00 Am</option> 
       <option value="11:00 Am">11:00 Am</option> 
       <option value="12:00 Pm">12:00 Pm</option> 
       <option value="1:00 Pm">1:00 Pm</option> 
       <option value="2:00 Pm">2:00 Pm</option> 
       <option value="3:00 Pm">3:00 Pm</option> 
       <option value="4:00 Pm">4:00 Pm</option> 
       <option value="5:00 Pm">5:00 Pm</option> 
       <option value="6:00 Pm">6:00 Pm</option> 
       <option value="7:00 Pm">7:00 Pm</option> 
       <option value="8:00 Pm">8:00 Pm</option> 
       <option value="9:00 Pm">9:00 Pm</option> 
       <option value="10:00 Pm">10:00 Pm</option> 
       <option value="11:00 Pm">11:00 Pm</option> 
      </select>         
     </div>      
    </div>          
    <br/> 
</div> 
<label for=""><a id="addmoredate">Add more date & time</a></label> 

Теперь я собираюсь добавить еще дату и время, используя Add more date & time ссылку. Это прекрасно добавляет новые даты и время. Но вот вопрос:

E.g. По умолчанию отображается 1 поле даты и времени. Этот календарь поля даты подходит с использованием add_date id.

Так что, когда я добавить еще дату и время поля можно выбрать календарь дат

, но если я удалю свою добавленное даты и время поля по близко ссылки, а затем Если добавить еще один I не может получить календарь даты.

Может быть, я не могу получить правильный add_date id.

Не могли бы вы рассказать мне, как я могу это решить?

Вот мой JQuery Код:

$(document).ready(function() { 

    var max_fields  = 30; //maximum input boxes allowed 
    var wrapper   = $(".addmore_box_date"); //Fields wrapper 
    var add_button  = $("#addmoredate"); //Add button ID 

    $('#add_date').datetimepicker({  
      timepicker:false, 
      format:'Y-m-d', 
      formatDate:'Y/m/d', 
      minDate:'-1970/01/02', // yesterday is minimum date 
      maxDate:'+2017/12/01', // and tommorow is maximum date calendar    
    });  

    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 

      var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></div></span>"); 

      newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x)); 
      $(wrapper).append(newRow); 

      $('#add_date'+x).datetimepicker({  
        timepicker:false, 
        format:'Y-m-d', 
        formatDate:'Y/m/d', 
        minDate:'-1970/01/02', // yesterday is minimum date 
        maxDate:'+2017/12/01', // and tommorow is maximum date calendar     
       });  

     } 
    }); 

    $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text 
     e.preventDefault(); $('#date_time_close').remove(); x--; 
    })  
}); 

Answer 1

Я думаю, что вы можете решить вашу проблему 3 шага:

1. добавить class='add_time' в свой <select> тег, как показано ниже:

<select class="form-control add_time" id="add_time" name="add_time[]" class='add_time'> 

2. активировать add_date элементов кол-во var count = $('.add_button').length; и использовать count вместо x в состоянии.

3. удалить x--; с вашего кода.

, а затем код JQuery должен быть такой:

$(document).ready(function() { 

    var max_fields  = 30; //maximum input boxes allowed 
    var wrapper   = $(".addmore_box_date"); //Fields wrapper 
    var add_button  = $("#addmoredate"); //Add button ID 

    $('#add_date').datetimepicker({  
      timepicker:false, 
      format:'Y-m-d', 
      formatDate:'Y/m/d', 
      minDate:'-1970/01/02', // yesterday is minimum date 
      maxDate:'+2017/12/01', // and tommorow is maximum date calendar    
    });  

    var x = 1; //initlal text box count 
    var count = $('.add_button').length; 

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

     e.preventDefault(); 
     if(count < max_fields){ //max input box allowed   
      x++; //text box increment 

      var newRow = $("<span id='date_time_close'><div class='row'><div class='col-xs-6 col-sm-4 col-md-4'><input type='text' name='add_date[]' class='form-control' id='add_date"+x+"' placeholder='Select date'></div><div class='col-xs-6 col-sm-4 col-md-4'><div class='new_select'></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></div></span>"); 

      newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'form-control add_time'+x)); 
      $(wrapper).append(newRow); 

      $('#add_date'+x).datetimepicker({  
        timepicker:false, 
        format:'Y-m-d', 
        formatDate:'Y/m/d', 
        minDate:'-1970/01/02', // yesterday is minimum date 
        maxDate:'+2017/12/01', // and tommorow is maximum date calendar     
       });  

     } 
    }); 

    $(wrapper).on("click",".remove_date_time", function(e){ //user click on remove text 
     e.preventDefault(); $('#date_time_close').remove(); 
    })  
}); 

Описание: при удалении add_date элемента на close button мыши и уменьшить х переменной, DateTimePicker объект из удаленный элемент находится в памяти и не удаляется.

Когда вы добавляете новый элемент с именем недавно удаленного элемента, вы не можете определить другой объект datetimepicker с тем же именем.