当动态创建字段时，jquery日期选择器和时间选择器不起作用 [英] Jquery date picker and time picker do not work when fields are dynamically created

问题描述

我在jQuery代码下面使用生成动态输入字段（多个），它包括时间选择器和日期选择器。但是他们没有工作。

$ $ $ $'''code $（'＃add_another_event'）。click（function（）
{
$ var $ address = $（'＃sub_events'）;
var num = $（'。clonedAddress'）。length; //每个地址内有5个孩子，所以prevCloned地址* 5 + original
var newNum = new Number（num + 1）;
var newElem = $ address.clone（）。attr（'id'，'address'+ newNum）.addClass（'clonedAddress'）;

//设置所有div id和输入id的
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_namename =as_nameclass =txt-input smalltype =text> 
< input id =as_idname =as_idclass =txt-input smalltype =hidden>< / p> 
< p>< label>开始日期< / label> 
< input id =start_datename =start_dateclass =datepicker txt-input smalltype =text>< / p> 
< p>< label>结束日期< / label> 
< input id =end_datename =end_dateclass =datepicker txt-input smalltype =text>< / p> 
< p><标签>营业时间< / label> 
 From：< input style =width：100pxid =time_fromname =time_fromclass =timepicker txt-input smalltype =text> 
收件人：< input style =width：100pxid =time_toname =time_toclass =timepicker txt-input smalltype =text> 
< / p> 
  

时间选取器和日期选择器

<$ p $ timepicker（{
hourGrid：4，
minuteGrid：10，
timeFormat：'hh：mm tt'$ b $ $（'。timepicker'）。 b}）;

$（'。datepicker'）。datepicker（）;


我的问题是上面的选择器在字段被克隆时不显示。

我试着用jQuery .live（）

但它不起作用。请帮忙，我不是jQuery专家

以下是一个例子 http://jsfiddle.net/MkhZ2/17/

任何快速回复将不胜感激

解决方案

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

  $（'。datepicker'，newElem）.removeClass（'hasDatepicker'）。datepicker（）
  pre> 
 
 
在这种情况下，将您的新集合作为上下文，以便您不搜索整个文档。
 
 
 
 
 
 
这显示了克隆vs模板的一个缺陷。如果您使用模板生成新表单，则不会冒险复制可能影响新窗体中构建窗口小部件方式的数据和类。在你的情况下，你需要删除由UI应用的 hasDatepicker 类，并防止在输入上初始化新的日期选择器。但是，您也不能使用清理方法 datepicker（'destroy'），因为实际上没有新节点上的日期选择器。所以你最终不得不手动清理。
 
I'm using below jquery code to generate dynamic input fields(multiple) and it includes time pickers and date pickers. but they don not work.
$('#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');              

    });
These are the fields I clone
<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>
Time Picker and Date picker
  $('.timepicker').timepicker({
        hourGrid: 4,
        minuteGrid: 10,
        timeFormat: 'hh:mm tt'
    });

    $('.datepicker').datepicker();
My issue is above pickers are not shown when the fields are clone.

I tried with jquery .live()

but it doesn't work. Please help, I'm not an jquery expert

Here is an example http://jsfiddle.net/MkhZ2/17/

Any quick response will be highly appreciated
解决方案
You need to re-initialize the date/time pickers on your new elements and clear the classes that were added by the UI widget:
$('.datepicker', newElem).removeClass('hasDatepicker').datepicker()
In this case, providing your new collection as the context so that you don't search the entire document.



This is showing one of the pitfalls with cloning vs templating. If you used a template to generate your new forms, you wouldn't risk copying data and classes which may affect the way the way widgets are constructed in the new form. In your case, you need to remove the hasDatepicker class which is applied by the UI and prevents new datepickers from being initialized on the input. However, you also can't use the cleanup method datepicker('destroy') because there isn't actually a datepicker on the new nodes. So you end up having to do cleanup manually.

                        
这篇关于当动态创建字段时，jquery日期选择器和时间选择器不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！