jQuery：在動態創建的輸入上運行多個datepicker

Question

我正在嘗試並且未能將datepicker添加到動態創建的輸入中。

它們具有不同的ID，我專門針對新輸入並調用datepicker。

在下面的jsFiddle示例中，它僅適用於第二個輸入（已調用第一個datepicker），此后不再適用於其他任何輸入。

這是jsFiddle： http : //jsfiddle.net/TJfbc/1/按加號添加更多。

注意：我知道第一個元素將沒有日期選擇器。

Answer 1

這是一個更清潔的選擇

$(function() {
    //append one handler to the parent to detect append actions
    $('.action_items').on('click', '.expand', function() {
        var $el = $(this);
        $el.parent()
            .clone()
            .appendTo($el.closest('.action_items'))
            .find('input')
            .removeClass('hasDatepicker')
            .each(function () {
                newName = this.name.slice(0,6) + (parseInt(this.name.slice(6)) + 1);
                this.name = newName;
                this.id = newName;
             })
            .datepicker();

        //change text, remove original handler, add the remove handler
        $el.text('-').off('click').on('click',function(){
            $(this).parent().remove();
        });
    })
});​

Answer 2

http://jsfiddle.net/TJfbc/27/

您需要“刷新”具有“ hasDatepicker”類的先前文本字段，然后才能初始化新文本字段

new_action_item.find('.dpDate').removeClass('hasDatepicker').datepicker()

可讀性方面的改進：

• 無需在new_action_item上重復調用$（），因為clone（）返回一個已經是jQuery的對象