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的对象