javascript - 动态创建字段时，jQuery 日期选择器和时间选择器不起作用

Question

我使用下面的 jQuery 代码生成动态输入字段(多个)，它包括时间选择器和日期选择器，但它们不起作用。

$('#add_another_event').click(function() 
    {
        var $address = $('#sub_events');
        var num = $('.clonedAddress').length; // there are 5 children inside each address so the prevCloned address * 5 + original
        var newNum = new Number(num + 1);
        var newElem = $address.clone().attr('id', 'address' + newNum).addClass('clonedAddress');

        //set all div id's and the input id's
        newElem.children('div').each (function (i) {
            this.id = 'input' + (newNum*5 + i);
        });

        newElem.find('input').each (function () {
            this.id = this.id + newNum;
            this.name = this.name + newNum;
        });

        if (num > 0) {
            $('.clonedAddress:last').after(newElem);
        } else {
            $address.after(newElem);
        }


        $('#btnDel').removeAttr('disabled');              

    });

这些是我克隆的字段

<p><label>Art Space </label>
<input id="as_name" name="as_name" class="txt-input small" type="text">
<input id="as_id" name="as_id" class="txt-input small" type="hidden"></p>
<p><label>Start Date </label>
<input id="start_date" name="start_date" class="datepicker txt-input small" type="text"></p>
<p><label>End Date </label>
<input id="end_date" name="end_date" class="datepicker txt-input small" type="text"></p>
<p><label>Opening Hours </label>
From : <input style="width: 100px" id="time_from" name="time_from" class="timepicker txt-input small" type="text">
To : <input style="width: 100px" id="time_to" name="time_to" class="timepicker txt-input small" type="text">
</p>

时间选择器和日期选择器

  $('.timepicker').timepicker({
        hourGrid: 4,
        minuteGrid: 10,
        timeFormat: 'hh:mm tt'
    });

    $('.datepicker').datepicker();

我的问题是当字段克隆时，上面的选择器不会显示。

我尝试使用 jQuery .live() 但它不起作用。我不是 jQuery 专家。

这是一个示例 http://jsfiddle.net/MkhZ2/17/

Answer 1

您需要重新初始化新元素上的日期/时间选择器并清除 UI 小部件添加的类:

$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()

在这种情况下，提供您的新集合作为上下文，这样您就不必搜索整个文档。

<小时/>

这显示了克隆与模板的陷阱之一。如果您使用模板来生成新表单，则不会冒险复制可能影响新表单中构建小部件的方式的数据和类。在您的情况下，您需要删除 UI 应用的 hasDatepicker 类，并防止在输入上初始化新的日期选择器。但是，您也无法使用清理方法datepicker('destroy')，因为新节点上实际上没有日期选择器。所以你最终不得不手动进行清理。