在動態創建的輸入上實例化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();       
    } 
}); 
}