jQuery clone（）问题
这是我的完整HTML日期和时间表：
Select time 12:00 Am 1:00 Am 2:00 Am 3:00 Am 4:00 Am 5:00 Am 6:00 Am 7:00 Am 8:00 Am 9:00 Am 10:00 Am 11:00 Am 12:00 Pm 1:00 Pm 2:00 Pm 3:00 Pm 4:00 Pm 5:00 Pm 6:00 Pm 7:00 Pm 8:00 Pm 9:00 Pm 10:00 Pm 11:00 Pm
现在，我将使用Add more date & time链接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:'Ym-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 = $(""); 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:'Ym-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--; }) });
我认为你可以通过3个步骤来解决你的问题：
- 将
class='add_time'添加到标记中，如下所示：
-
get count
add_dateelements count byvar count = $('.add_button').length;并在条件中使用count变量而不是x。 -
删除
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:'Ym-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 = $(""); 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:'Ym-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(); }) });
说明：当您在close button上删除add_date元素时，单击并减小x变量，已删除元素的datetimepicker对象将在内存中而不会被删除。
当您添加具有最近删除元素名称的新元素时，您无法定义具有相同名称的另一个datetimepicker对象。