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')，因为新节点上实际上没有日期选择器。所以你最终必须手动清理。

Answer 2

您必须调用

$('target_selector').datepicker();

为每个动态添加的元素。

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

2 个答案: