jquery - jQuery插件不适用于动态添加的元素

Question

如何让 jQuery 插件为动态添加的元素工作？每次单击“添加”按钮时，我都会尝试将几个日期选择器添加到 DIV 日期 列表中。该插件不适用于动态添加的文本框。有人可以请教吗？

谢谢你

HTML

<div class="datesList">
    <div class="date">
        <input type="text" class="date-picker"/>
    </div>
</div>

<div class="addDate">
    Add Date
</div>

JS

$(".date-picker").datepicker();

$(".addDate").click(function(){
   var dList = $(".datesList");
   dList.find(".date").first().clone(false).appendTo(dList);
});

Answer 1

使用 jquery on() http://api.jquery.com/on/像这样：

$(document).on('click', '.addDate', function() {
     YOUR FUNCTION
});

为了获得更好的性能而不是 $(document)，请使用第一次加载的最近的 DOM 元素

Answer 2

尝试这个

 $(".date-picker").datepicker();

 $(".addDate").click(function(){
   var dList = $(".datesList");
   dList.find(".date").first().clone(false).appendTo(dList);
   $(".date-picker").datepicker();
});

Answer 3

这行得通，但你可能不喜欢我做的方式

$(".date-picker").datepicker();

$(document).on('click', '.addDate', function() {
    var dList = $(".datesList");
    var newinput = $('<input type="text" />').attr('class', 'date-picker');
    dList.append(newinput);
    var newdatepickr = $(".date-picker").datepicker();
});​

http://jsfiddle.net/2pFAd/

Answer 4

如果这是 jQuery UI 日期选择器，您可以.datepicker('refresh')在每次更新后简单地调用。