jQuery的克隆（）不按预期工作

我有以下的HTML选择元素：jQuery的克隆（）不按预期工作

<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

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：

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

来源

2016-05-23 shibbir ahmed

的每次点击您要追加新报具有相同ID'date_time_close'的错误 - 错误！ – Justinas

我认为问题不在于'date_time_close' ID。你看到那个文本'添加更多数据和时间'。当我点击这个文本链接它显示1选择元素，然后显示更多的选择元素.. –

@Justinas没有说这是因为错误的ID，他暗示你有相同的ID不好。不是一个好习惯。 –

因为要附加到在此基础上得到了克隆的每一行和类此元素每次所以它觉得这对其他行也，并将它们添加有也

.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

来源

2016-05-23 12:42:01

我明白了。但我改变了班级名称。你能告诉我这个工作的例子吗？ –

我发布了代码，试试吧 –

让我试试这个。 –

<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>

来源

2016-05-23 13:08:58 DsRaj

jQuery的克隆（）不按预期工作

回答

相关问题