0

我正在使用下面的 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/

4

2 回答 2

3

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

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

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

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

于 2013-02-24T13:22:43.597 回答
0

您必须调用

$('target_selector').datepicker();

对于每个动态添加的元素。

于 2013-02-24T13:21:40.463 回答