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>

可以使用此ID addmoredate

添加更多日期和时间的链接

所以，为此，我使用以下JQuery代码，但第一次添加一个select元素。这是第二次，但是当我添加更多时，它会添加3个选择元素，但它应该是1加1。

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


       $(wrapper).append("<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></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></span>");   

       if(x == 2) {
        var y = x+1;
        $('select.add_time').clone().attr('class', 'add_time'+y).appendTo('.new_select');
       } else {             
        alert(x);
        $('select.add_time'+x).clone().attr('class', 'add_time'+x).appendTo('.new_select');
       }


     $('#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                 
    });     

   }
});

首次显示如下：

但是第二次添加更多选择元素而不是1

Answer 1

因为每次你根据在每一行克隆的类附加到这个元素，所以它也会在其他行上找到它并在那里添加它们

.appendTo('.new_select');

试试这个

$(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></div><a class='remove_date_time pull-right'>&nbsp;Close</a></div></span>");

       /* if(x == 2) {
          var y = x+1;
          newRow.find('.new_select').append($('select.add_time').clone().attr('class', 'add_time'+y));
       } else {             
           //alert(x);
           newRow.find('.new_select').append($('select.add_time'+x).clone().attr('class', 'add_time'+x));

       }*/

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

   }
});

<强> Example Fiddle

Answer 2

<script>
$(document).on("click", "#addmoredate", function(){
   add_more($(".row:last"));
});
function add_more(evt)
{
    var curr = evt;
    var item = $(curr).clone(true);
    $(curr).parent().append("<br/>").append(item).show();
}
</script>

jQuery clone（）未按预期工作

2 个答案: