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

Question

我正在尝试使用datepicker复制字段.该字段是重复的,但是datepicker只显示在前两个字段上......我尝试过其他的解决方法,比如在live调用datepicker的字段中添加一个监听器,但是没有去.

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属性需要是唯一的.我想更好的解决方案将类似于上面的内容,但使用className选择而不是名称.

任何想法都会令人敬畏.

编辑:是的,我正在混合原型和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();                         
   }
});
}