在动态创建的输入上实例化datepicker

Question

我试图用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(); 
    }); 
}); 

所以表单从一个输入开始并且datepicker工作正常。如果我复制该输入，则重复输入正常工作。但是，在此之后，任何后续重复的输入都无法按预期工作。下面是生成的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> 

我只是意识到，这不会为我工作，要么为name属性必须是唯一的。我想更好的解决方案将类似于上述，但类名选择而不是名称。

任何想法都会令人惊叹。

编辑：是的，我是混合原型和jQuery：/

Answer 1

可以在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 
}); 

这只是创建你的新<input>的.datepicker()因为它已经创建。 You can test it out here。以上是突破的解释，但它可以被压缩尽可能多的是可读的，像这样：

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(); 
}); 

Answer 2

它驱使我疯了前些日子！看起来像jqueryui datepicker忽略类“hasDatepicker”的元素。分配一个新的唯一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();       
    } 
}); 
}