jQuery clone（）问题 [英] jQuery clone() issue
问题描述
这是我的完整HTML日期和时间表：
Here is my full html date and time table :
<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>
现在我将使用添加更多日期和时间来添加更多日期和时间时间链接。它完美地增加了新的日期和时间。但这是一个问题：
Now I am going adding more date and time using Add more date & time link. It's perfectly adding new date and time. But here is an issue :
例如默认情况下，它显示1个日期和时间字段。此日期字段日历将使用 add_date id。
E.g. By default it's showing 1 date and time field. This date field calendar is coming using add_date id.
因此，当我添加另一个日期和时间字段时，我可以选择日期日历
So when I add another date and time field I can select the date calendar
但如果我通过关闭链接删除我添加的日期和时间字段，然后如果我添加另一个，则无法获取日期日历。
but if I delete my added date and time field by close link and then If I add another one I can't get the date calendar.
可能是我无法获得正确的 add_date id。
May be I can't get the correct 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'> 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--;
})
});
推荐答案
我认为你可以通过3个步骤解决问题：
I think you can solve your problem by 3 steps:
- 将
class ='add_time'添加到< ;选择>标签如下：
- add
class='add_time'to your<select>tag as below:
<select class="form-control add_time" id="add_time" name="add_time[]" class='add_time'>
-
活跃
add_date元素按var count = $（'。add_button'）。length;并使用count变量而不是x条件。
get active
add_dateelements count byvar count = $('.add_button').length;and use thecountvariable insteadxin the condition.
remove
然后你的JQuery代码必须是像这样：
and then your JQuery code must be like this:
$(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'> 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 元素在关闭按钮上单击，并减小x变量，删除元素的datetimepicker对象在内存中并且不会被删除。
Description:
when you remove the add_date element on close button click, and decrease the x variable, the datetimepicker object of the removed element is in the memory and not removed.
当您添加具有最近删除元素名称的新元素时，您无法定义另一个具有相同名称的datetimepicker对象。
when you add a new element with the name of recently removed element, you can not define another datetimepicker object with the same name.
这篇关于jQuery clone（）问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
