Javascript JQuery日期选择器在创建新Div后不工作

我有一张表格

剧本 HTML 我想弄明白的是，为什么当页面加载日期选择器时工作正常，而在我创建了一个新的DIV元素之后，日期选择器就不再工作了

当查看源代码时，我看到添加了一个类hasDatepicker，它来自ejquery-ui.js或sjquery-ui.js，我认为这是罪魁祸首

我有一个JSFIDLE示例，但是我无法让日期选择器工作。

工作示例

最简单的解决方案：

在页面上，转到以下行：

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，因此没有为新输入分配任何事件

我建议重新构建表单，而不是复制表单，并且我将远离输入上的直接ID。这可能会让人困惑

进一步建议 我会简化整个过程，去掉开场白。如果您创建要从中克隆的基础模板，然后添加/删除所需的部件，以及其他不需要的部件，则会容易得多。此外，通过使用.on或.live，您可以更好地控制元素的动态事件标记。也就是说，我不需要每次都使用内联href=function命令。让你明白我的意思更容易。[底部的额外链接]

请参见以下示例：

CSS JS HTML 后续信息：

我怀疑：

 $( "#datepicker1" ).datepicker1({changeMonth: true, changeYear: true});
 $( "#datepicker2" ).datepicker2({changeMonth: true, changeYear: true});

问题是，因为没有jQueryUI datepicker1或datepicker2方法

试一试

反而

---

好的，我在函数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" >

执行新的_workexp函数后

它查找创建的两个新文本输入，并分配一个新类calendar1，删除datepicker js放入calendar1 hasDatepicker中的内容

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" >

总结一下，当我在一个不同的项目中使用它时，我在添加范围时遇到了一个问题，可能与我在这里遇到的问题相同。为了解决这个问题，我编辑了jquery-ui.js jquery-ui.css文件，为每个文件分配datepicker1和datepicker2，并创建了4个新文件

sjquery-ui.js
sjquery-ui.css
ejquery-ui.js
ejquery-ui.css

---

我确信我可以进一步压缩它，但是它现在正在工作。

$…datepicker1不是控制台中的函数。。。你添加了合适的插件了吗？你看了我一半的答案了吗？我已经完全修复了您原来的问题，并向您展示了如何压缩代码。而且它很容易阅读。我可以添加更多的信息评论，如果这对你来说不够容易？

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" >

$(function() {
$('.calendar1').datepicker1({changeMonth: true, changeYear: true});
$('.calendar2').datepicker2({changeMonth: true, changeYear: true});
});

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);

<input type="text" name="sdate[]" id="sdate1" class="calendar1" >
<input type="text" name="sdate[]" id="edate1" class="calendar2" >

newDiv.find(".calendar1").datepicker1({changeMonth: true, changeYear: true});
newDiv.find(".calendar2").datepicker2({changeMonth: true, changeYear: true});

sjquery-ui.js
sjquery-ui.css
ejquery-ui.js
ejquery-ui.css