Question

如何让jQuery插件适用于动态添加的元素？我试图在每次点击“添加”按钮时向DIV datesList 添加几个日期选择器。该插件不适用于动态添加的文本框。有人可以建议吗？

谢谢

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

为了获得更好的性能而不是$（文档），请使用第一次加载的最接近的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，您可以在每次更新后调用.datepicker('refresh')。

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

4 个答案: