javascript - 动态添加的日期选择器将不起作用

Question

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

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

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

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

JS

var liClone;

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