我有一张表格。
<script>
// function to add set of elements
var we = 1;
function new_workexp() {
we++;
var newDiv = $('#workexp div:first').clone();
newDiv.attr('id', we);
var delLink = '<a class="btn btn-danger" style="text-align:right;margin-right:65px" href="javascript:delwe(' + we + ')" > Delete Work Experence ' + we + ' </a>';
newDiv.find('tr:first th').text('workexp ' + we);
newDiv.append(delLink);
$('#workexp').append(newDiv);
newDiv.find('input:text').val('');
}
// function to delete the newly added set of elements
function delwe(eleId) {
d = document;
var ele = d.getElementById(eleId);
var parentEle = d.getElementById('workexp');
parentEle.removeChild(ele);
//we--;
}
$(function() {
$( "#datepicker1" ).datepicker1({changeMonth: true, changeYear: true});
$( "#datepicker2" ).datepicker2({changeMonth: true, changeYear: true});
});
</script>
<legend>Work Experence</legend>
<div id="workexp">
<div id="1">
<br />
<a class="btn btn-info" href="javascript:new_workexp()"> Add New Work Experence </a>
<br />
<table border="3">
<tbody>
<tr>
<th colspan="4" style="background-color:#b0c4de;">Work Experence 1</th>
</tr>
<tr>
<td>
<p>Please Select Your Start Date<input type="text" name="sdate[]" id="datepicker1" class="hasDatepicker"></p>
</td>
<td>
<p>Please Select Your End Date<input type="text" name="edate[]" id="datepicker2" class="hasDatepicker"></p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="ui-datepicker1-div" class="ui-datepicker1 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
<div id="ui-datepicker2-div" class="ui-datepicker2 ui-widget ui-widget-content ui-helper-clearfix ui-corner-all"></div>
我想弄清楚为什么当页面加载datepickers工作正常并且在我创建新的DIV元素后，datepickers不再工作
在查看源代码时，我看到一个类被添加了“hasDatepicker”，它来自ejquery-ui.js或sjquery-ui.js，我相信它是罪魁祸首。
我有一个JSFiddle示例但是我无法使用日期选择器。 http://jsfiddle.net/wyyg2avu/1/
答案 0 :(得分：0)
最简单的解决方案：
在页面thenerdservice.com/add/index.php上，转到以下行：
newDiv.find('input:text').val('')
只需添加：
.removeClass('hasDatepicker').datepicker({changeMonth: true, changeYear: true});
到最后。所以它看起来像：
newDiv.find('input:text').val('').removeClass('hasDatepicker').datepicker({changeMonth: true, changeYear: true});
问题是，你正在克隆上一个已经建立了datepicker输入的表单，因此无法创建新的日期选择器。此外，您无论如何都不会在新输入上调用.datepicker，因此不会为新输入分配任何事件。
我建议重建表单而不是复制它，我会从输入上的直接ID中移开。它可能会变得令人困惑。
我会简化整个过程并删除开头表格。如果您创建要从中克隆的base模板，然后添加/删除您需要的部分以及不需要的部分，则会更容易。此外，通过使用.on或.live，您可以更好地控制元素的动态事件标记。也就是说，我不需要每次都生成内联href="function命令。只是告诉你我的意思更容易。 [底部的额外链接]
<style>
.template { display: none !important; }
.we-div { margin: 1em auto; }
.btn-del-we { text-align: right; margin-right:65px }
</style>
<script>
function addDivWE(e) {
var countWE = $('.we-div:not(.template)').length + 1,
divWE = $('.template.we-div').clone().removeClass('template').attr({ id: countWE }).appendTo('body')
divWE.find('.we-count').text(countWE);
if (countWE > 1) divWE.append($('<a />', { class: 'btn btn-del-we btn-danger', href: 'javascript:void(0)', text: 'Delete Work Experence ' + countWE }));
divWE.find('input:text').datepicker({changeMonth: true, changeYear: true});
}
function delDivWE(e) {
$(this).closest('.we-div').remove();
reindexWE();
}
function reindexWE() {
var countWE = $('.we-div:not(.template)').length;
for (i=0;i<countWE;i++) {
var divWE = $($('.we-div:not(.template)')[i]),
newID = i + 1;
divWE.attr({ id: newID }).find('.we-count').text(newID);
divWE.find('.btn-del-we').text('Delete Work Experence ' + newID)
}
}
$(document)
.on('click', '.btn-add-we', addDivWE)
.on('click', '.btn-del-we', delDivWE)
addDivWE();
</script>
<body>
<div class="template we-div">
<a class="btn btn-add-we btn-info" href="javascript:void(0)"> Add New Work Experence </a>
<table border="3">
<tbody>
<tr>
<th colspan="4" style="background-color: #b0c4de;">Work Experence <span class="we-count"></span></th>
</tr>
<tr>
<td>
<p>Please Select Your Start Date<input type="text" name="sdate[]" /></p>
</td>
<td>
<p>Please Select Your End Date<input type="text" name="edate[]" /></p>
</td>
</tr>
</tbody>
</table>
</div>
</body>
跟进信息：
答案 1 :(得分：0)
我怀疑：
$( "#datepicker1" ).datepicker1({changeMonth: true, changeYear: true});
$( "#datepicker2" ).datepicker2({changeMonth: true, changeYear: true});
是问题，因为没有jQueryUI datepicker1或datepicker2方法
尝试
$( "#datepicker1, #datepicker2" ).datepicker({changeMonth: true, changeYear: true});
代替
答案 2 :(得分：0)
好的，我在函数new_workexp（）的末尾添加了几行似乎可以解决这个问题
newDiv.find("#sdate").attr("class", "calendar1");
newDiv.find("#edate").attr("class", "calendar2");
newDiv.find("#sdate").attr("id", "sdate" + we);
newDiv.find("#edate").attr("id", "edate" + we);
newDiv.find(".calendar1").datepicker1({changeMonth: true, changeYear: true});
newDiv.find(".calendar2").datepicker2({changeMonth: true, changeYear: true});
我更改了静态输入：
<input type="text" name="sdate[]" id="sdate" class="calendar1" >
<input type="text" name="edate[]" id="edate" class="calendar2" >
将类值添加到输入＆＃34; calendar1＆＃34;和calendar2＆＃34;
除了查找.class而不是#id
之外，原始的datepicker函数基本保持不变$(function() {
$('.calendar1').datepicker1({changeMonth: true, changeYear: true});
$('.calendar2').datepicker2({changeMonth: true, changeYear: true});
});
执行new_workexp函数后
它找到创建的两个新文本输入并分配一个新类＆＃34; calendar1＆＃34;删除datepicker js放入的内容＆＃34; calendar1 hasDatepicker＆＃34;。
newDiv.find("#sdate").attr("class", "calendar1");
newDiv.find("#edate").attr("class", "calendar2");
然后找到那些相同的元素为每个元素分配一个新的id增加最后一个值。
newDiv.find("#sdate").attr("id", "sdate" + we);
newDiv.find("#edate").attr("id", "edate" + we);
创建：
<input type="text" name="sdate[]" id="sdate1" class="calendar1" >
<input type="text" name="sdate[]" id="edate1" class="calendar2" >
然后最终为datepicker函数分配新输入。
newDiv.find(".calendar1").datepicker1({changeMonth: true, changeYear: true});
newDiv.find(".calendar2").datepicker2({changeMonth: true, changeYear: true});
总结一些混乱，当我在一个不同的项目中使用它时，我在添加一个范围时遇到了问题，可能是我在这里遇到的同样问题。为了解决这个问题，我编辑了jquery-ui.js jquery-ui.css文件，为每个文件分配了datepicker1和datepicker2，并创建了4个新文件。
sjquery-ui.js
sjquery-ui.css
ejquery-ui.js
ejquery-ui.css
我相信我可以进一步浓缩这个，但它现在正在运作。