[英]Jquery datepicker on dynamically created inputs changing the date of the first input
[英]instantiating datepicker on dynamically created input
我正在嘗試使用日期選擇器復制一個字段。 該字段被重復,但是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();
});
});
因此,表單從一個輸入開始,並且日期選擇器可以正常工作。 如果我重復該輸入,則重復的輸入可以正常工作。 但是,此后,任何隨后重復的輸入均無法按預期工作。 這是生成的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選擇而不是name。
任何想法都會很棒。
編輯:是的,我正在混合原型和jQuery:/
前幾天讓我發瘋! 看起來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();
}
});
}
您可以完全在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()
。 您可以在這里進行測試 。 上面的內容出於解釋目的而進行了分解,但是可以將其壓縮為可讀性,就像這樣:
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.