jQuery clone（）问题

时间：2016-05-25 05:59:14

标签： javascript jquery

这是我的完整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链接添加更多日期和时间。它完美地添加了新的日期和时间。但这是一个问题：

例如默认情况下，它会显示1个日期和时间字段。此日期字段日历即将使用add_date ID。

因此，当我添加另一个日期和时间字段时，我可以选择日期日历

但如果我通过关闭链接删除我添加的日期和时间字段，然后如果我添加另一个字段，则无法获取日期日历。

可能无法获得正确的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--;
    })      
});

1 个答案:

答案 0 :(得分：1)

我认为你可以通过3个步骤解决问题：

  1. 将class='add_time'添加到您的<select>代码中，如下所示：
    2. <select class="form-control add_time" id="add_time" name="add_time[]" class='add_time'>

    1. 将有效add_date元素计为var count = $('.add_button').length;，并在条件中使用count变量而不是x。

    2. 从代码中删除x--;。

      3. 然后你的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元素并减少x变量时，已删除元素的datetimepicker对象位于内存中而不会被删除。

      当您添加具有最近删除元素名称的新元素时，您无法定义具有相同名称的另一个datetimepicker对象。

相关问题
最新问题