我有一个jquery日期选择器字段,当用户点击Add
按钮时我将其克隆。
我希望日期选择器显示在屏幕上随后添加的字段中。现在,datepicker仅出现在第一个字段和not for the added/cloned fields
。
在这里检查了很多关于类似主题的帖子之后,我能够在这个阶段达成目标。 以下是我的代码。
<div class="repeatingSection">
<a href="#" class="deleteDate" style="display: none;">-Delete</a>
<input type="text" class="dateListValues" style="position: relative; z-index:100000;"
id="dateListValues_1" size="15" />
</div>
<a href="#" class="addDate">+ Add</a>
JS:
// Add a new repeating section
$('.addDate').click(function(){
var currentCount = $('.repeatingSection').length;
var newCount = currentCount+1;
var newID;
var lastRepeatingGroup = $('.repeatingSection').last();
var newSection = lastRepeatingGroup.clone();
newSection.insertAfter(lastRepeatingGroup);
newSection.find("input").each(function (index, input) {
input.id = input.id.replace("_" + currentCount, "_" + newCount);
input.name = input.name.replace("_" + currentCount, "_" + newCount);
input.value = "";
//removing the additional hasDatepicker class
$('#'+input.id).removeClass('hasDatepicker');
});
return false;
});
$('.dateListValues').each(function(){
$(this).datepicker();
});
感谢。
答案 0 :(得分:5)
您需要在新创建的元素上初始化datepicker
插件。请尝试在return false;
:
newSection.find(".dateListValues").datepicker();
答案 1 :(得分:1)
在click函数中初始化datepicker ..
$('.addDate').click(function(){
var currentCount = $('.repeatingSection').length;
var newCount = currentCount+1;
var newID;
var lastRepeatingGroup = $('.repeatingSection').last();
var newSection = lastRepeatingGroup.clone();
newSection.insertAfter(lastRepeatingGroup);
newSection.find("input").each(function (index, input) {
input.id = input.id.replace("_" + currentCount, "_" + newCount);
input.name = input.name.replace("_" + currentCount, "_" + newCount);
input.value = "";
//removing the additional hasDatepicker class
$('#'+input.id).removeClass('hasDatepicker');
});
newSection.find(".dateListValues").datepicker(); //here
return false;
});