javascript - 在动态创建的输入上实例化日期选择器

Question

我正在尝试使用日期选择器复制一个字段。该字段重复，但日期选择器仅显示在前两个字段上......我尝试了其他解决方法，例如将 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();
    });
});

因此表单从一个输入开始，并且日期选择器可以正常工作。如果我复制该输入，则复制的输入可以正常工作。但是，在此之后，任何随后重复的输入都不会按预期工作。这是生成的 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 属性必须是唯一的。我认为更好的解决方案与上述类似，但选择的是 className 而不是名称。

任何想法都会令人敬畏。

编辑:是的，我正在混合使用原型(prototype)和 jQuery:/

Answer 1

前几天把我逼疯了!看起来 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();                         
   }
});
}