【发布时间】：2015-09-15 07:01:22
【问题描述】：
目前正在使用 jquery 开发克隆和日期选择器。我目前的代码克隆非常完美。在克隆 div 中，日期选择器正在工作，但它不像原来那样工作。
当用户单击添加更多按钮时，它会完美地克隆整个 div，但如果我从克隆的 div 中选择日期文本字段年月下拉菜单不显示。
当用户在原始学位日期中单击添加更多按钮时，它显示的是当前日期，但在克隆中却没有显示。
我已经尝试了所有可能的方法，但我没有得到
我已尝试为日期选择器添加销毁功能仍然无法正常工作
这是我的 jquery 代码
var i = 1;
$(document).on("click", ".edu_add_button", function() {
var i = $('.cloned-row1').length;
$(".cloned-row1:last").clone(true).insertAfter(".cloned-row1:last").attr({
'id': function(_, id) {
return id + i
},
'name': function(_, name) {
return name + i
}
}).end().find('[id]').val('').attr({
'id': function(_, id) {
return id + i
}
});
$(".cloned-row1:last").find(".school_Name").attr('disabled', true).val('');
$(".cloned-row1:last").find(".degree_Description").attr('disabled', true).val('');
$(".cloned-row1:last").find('.datepicker,.datepicker1').removeClass('hasDatepicker').datepicker();
i++;
return false;
});
$("#txt_Degdat").datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
changeYear: true,
yearRange: '1900:2100'
}).on('change', function() {
if ($('#txt_Degdat').valid()) {
$('#txt_Degdat').removeClass('errRed');
}
// triggers the validation test on change
}).datepicker("setDate", "0");
$("#txt_Trsdat").datepicker({
dateFormat: "mm-dd-yy",
changeMonth: true,
changeYear: true,
yearRange: '1900:2100'
}).on('change', function() {
if ($('#txt_Trsdat').valid()) {
$('#txt_Trsdat').removeClass('errRed');
}
// triggers the validation test on change
});
$(document).on('click', ".btn_less1", function() {
var len = $('.cloned-row1').length;
if (len > 1) {
$(this).closest(".btn_less1").parent().parent().parent().remove();
}
});
这是 HTML 代码
<div class="container-fluid cloned-row1">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<label>School Name</label>
<br/>
<select class="slt_Field txt_schName" name="txt_schName[]">
<option value="">Please Select</option>
<option value="Emirates College of Technology- UAE">COL000001</option>
<option value="Al Khawarizmi International College- UAE">COL000002</option>
<option value="Syscoms College">COL000003</option>
<option value="Abounajm Khanj Pre-Uni Center">COL000004</option>
<option value="Advanced Placement">COL000005</option>
<option value="Al Buraimi College (Uni Clge)">COL000006</option>
<option value="Al-Ain Community College">COL000007</option>
<option value="AMA Computer College">COL000008</option>
<option value="Arab Academy for Bankg and Fin">COL000009</option>
<option value="ARABACDSCITECHMARTIMETRNS">COL000010</option>
<option value="Arapahoe Community College">COL000011</option>
</select>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<br>
<input type="text" class="ipt_Field school_Name" name="school_Name[]" disabled/>
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<label><span class="text-error">*</span>High School Avg / CGPA</label>
<br/>
<input type="text" class="ipt_Field ipt_Havg" id="" name="ipt_Havg[]" />
</div>
<div class="col-xs-6 col-sm-3 col-md-4 col-lg-3">
<label><span class="text-error">*</span>Grade Type @</label>
<br/>
<select class="slt_Field ipt_grd" name="ipt_grd[]">
<option value="">Please Select</option>
<option value="n">100</option>
<option value="n1">4</option>
<option value="c">CHAR</option>
</select>
</div>
<input type="text" placeholder="MM/DD/YYYY" class="ipt_Field txt_Degdat" name="txt_Fdob" />
</div>
<button class="btn_less1 btn_right ">Less</button>
<button class="btn_more btn_right edu_add_button">Add More</button>
这是编织Link
任何建议请我在这里做错了什么。
我已经尝试了所有可能的方法，但没有任何想法
【问题讨论】：
-
您在日期选择器中使用 id 作为选择器。 ID 必须是唯一的。将您的标记更改为类，然后重试。
-
为什么你可以试试bootstrap blugin？，很简单，只需下载库并调用特定ID的datepicker函数，就是这样
-
@andrew 我用 id 试过它不起作用 $(".cloned-row1:last").find('#txt_Degdat,#txt_Trsdat').removeClass('hasDatepicker').datepicker( );
标签： javascript jquery html datepicker