[英]instantiating datepicker on dynamically created input
I'm trying to duplicate a field with a datepicker. 我正在尝试使用日期选择器复制一个字段。 The field gets duplicated, but the datepicker only shows on the first two fields... I've tried other workarounds such as adding a live
listener to the field that calls the datepicker, but no go. 该字段被重复,但是datepicker仅显示在前两个字段上……我尝试了其他解决方法,例如向该调用datepicker的字段添加了live
侦听器,但没有进行。
var dc=0;
jQuery('#otherRecAdd').click(function(){
dc++;
var d=$('othrRecDates').innerHTML;
var nd=document.createElement('div');
nd.innerHTML=d;
var divID='othrDate'+dc;
nd.id=divID;
jq(nd).attr('id','orInID'+dc);
var ind=jq(nd).find('input');
var indID='orDate'+dc;
jq(ind).attr('id',indID)
document.getElementById('otherReccuranceDiv').appendChild(nd);
var x=jq("input[name=othrRdate]");//x.length increments correctly; it is finding all of the inputs
x.datepicker();
})
//this doesn't work either
jq(function(){
jq('input[name=othrRdate]').live('click', function() {
jq(this).datepicker({showOn:'focus'}).focus();
});
});
So the form starts out with one input and the datepicker works correctly. 因此,表单从一个输入开始,并且日期选择器可以正常工作。 If I duplicate that input, the duplicated input works correctly. 如果我重复该输入,则重复的输入可以正常工作。 However, after this, any subsequently duplicated inputs do not work as expected. 但是,此后,任何随后重复的输入均无法按预期工作。 Here is the generated html: 这是生成的html:
<label for="otherRec">Other Reccurance</label></b>
<input name="otherRec" id="otherRec" onclick='toggleDiv("othrRecDates");' type="checkbox">
<div id="othrRecDates" style="">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="date" type="text">
<br>
</div>
<div id="orInID1">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate1" type="text">
<br>
</div>
<div id="orInID2">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate2" type="text">
<br>
</div>
<div id="orInID3">
<b>Date:</b>
<input class="hasDatepicker" name="othrRdate" id="orDate3" type="text">
<br>
</div>
And I just realized that this won't work for me either as the name
attributes need to be unique. 我只是意识到这对我也不起作用,因为name
属性需要唯一。 I suppose better solution would be something akin to the above but with className selection instead of name. 我想更好的解决方案将类似于上述内容,但使用className选择而不是name。
Any ideas would be awesomely awesomed. 任何想法都会很棒。
edit: yes, I am mixing prototype and jQuery :/ 编辑:是的,我正在混合原型和jQuery:/
It drove me nuts the other day! 前几天让我发疯! Looks like the jqueryui datepicker ignores the elements with class "hasDatepicker". 看起来jqueryui datepicker忽略了具有“ hasDatepicker”类的元素。 Assigning a new unique id and removing the hasDatepicker class did the magic. 分配一个新的唯一ID并删除hasDatepicker类确实神奇。
if($(objParentTR).next().find('input')){ //spot the input field and iterate
$(objParentTR).next().find('input').each(function(i, domEle){
if($(domEle).hasClass("clsDatePicker")){
$(domEle).attr('id', 'dyncal'+tID++).removeClass('hasDatepicker').datepicker();
}
});
}
You can do this a bit simpler entirely in jQuery, for example: 您可以完全在jQuery中完成此操作,例如:
var dc=0;
jQuery('#otherRecAdd').click(function() {
dc++;
jQuery('#othrRecDates') //get id="othrRecDates" as a jQuery object
.clone() //make a copy
.attr('id', 'othrDate'+dc) //give it a new id
.show() //show it, assuming the template is hidden
.appendTo('#otherReccuranceDiv')//append it where it does in the DOM
.find('input') //get the child <input>
.attr('id', 'orDate'+dc) //set it's ID, possible name here too
.datepicker(); //create a datepicker on it
});
This just creates the .datepicker()
on your new <input>
as it's created. 这将在创建新的<input>
创建.datepicker()
。 You can test it out here . 您可以在这里进行测试 。 The above is broken out for explanation, but it can be condensed down as much as is readable, like this: 上面的内容出于解释目的而进行了分解,但是可以将其压缩为可读性,就像这样:
var dc=0;
jQuery('#otherRecAdd').click(function() {
dc++;
jQuery('#othrRecDates').clone().attr('id', 'othrDate'+dc).show()
.appendTo('#otherReccuranceDiv')
.find('input').attr('id', 'orDate'+dc).datepicker();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.