动态添加的日期选择器不起作用答案

【问题标题】：datepicker added dynamically won't work动态添加的日期选择器不起作用
【发布时间】：2014-01-02 22:32:47
【问题描述】：

我检测到datepicker 存在问题。我正在动态添加控件，其中一个是日期选择器，旁边还有几个选择和一个文本区域。

好吧，每当我添加一个日期选择器时，假设我有 3 个datepickers，我设置第一个的日期，然后我尝试设置第二个或第三个的日期，好吧，我的问题是设置第二个或第三个的日期将其设置为第一个

请参阅此fiddle 以查看重现的问题。只需添加 2 或 3 个日期选择器，单击添加按钮并尝试设置日期。任何关于为什么会这样以及如何解决的想法将不胜感激

【问题讨论】：

ID 应该是唯一的。

标签： javascript jquery html jquery-ui datepicker

【解决方案1】：

这是因为你在克隆元素时使用了相同的 ID，如果你使用相同的 ID，JavaScript 就无法区分它们。

如果您将 ID 切换为可以使用的类，请参见此处：http://jsfiddle.net/j72UG/2/

HTML

<input type='button' value="add" id="addLi" />
<ul class="list">
    <li class="dateLi">
        <input type='text' class='date' />
    </li>
</ul>

var liClone;

$(function () {
    liClone = $(".dateLi").clone(true);
    $(".dateLi").remove();
    $("#addLi").click(function () {
        var clonado = liClone.clone(true);
        clonado.appendTo(".list");
        clonado.find("input").datepicker();
    });
});

【讨论】：

是的，玩了几个小时后，发现 id 的位置相同，这给了我问题。我在 id 中添加了一个计数器，但这个解决方案似乎更好，谢谢！

【解决方案2】：

克隆时，所有元素都保留相同的 ID。在给定的 DOM 结构中，在任何给定时间，只有一 (1) 个元素可以具有特定 ID。所以给你的列表项一个类或一个以序列结尾的 ID，以避免将来出现这个问题。

var li = $('<li class="dateLi"><input type="text" /></li>');

查看此更新的jsfiddle。

【讨论】：

【解决方案3】：

那是因为您必须更改每个输入的 id 和 li。
试试这个：

jsfiddle.net/LgRR7/

【讨论】：