jQuery datepicker不能在循環內工作

Question

我有一個jquery事件，它會創建動態的HTML輸入文本。在這個循環中，我需要展示一個日曆。所以我js代碼如下：

$('.nof').keyup(function(){ 
    $('.myfld').empty(); 
    var html = ''; 
    nof = $('.nof').val(); 
    html = html + '<div class="partners">'; 
    for(var x = 1; x <= nof; x++) { 
     html = html + '<div class="form_box_2">'; 
     html = html + '<div class="applicantform_row"><label>Name : </label><input type="text" name="partner_name_'+x+'" /></div>'; 
     html = html + '<div class="applicantform_row"><label>Sex : </label><input type="text" name="partner_sex_'+x+'" /></div>'; 
     html = html + '<div class="applicantform_row"><label>Date of Birth: </label><input type="text" class="appdate" id="dob_'+x+'" name="partner_dob_'+x+'" onchange="getAge();" /></div>'; 
     html = html + '<div class="applicantform_row appage"><label>Age : </label><div id="age_'+x+'"></div> </div>'; 
     html = html + '<div class="applicantform_row"><label>PAN : </label><input type="text" name="partner_pan_'+x+'" /></div>'; 
     html = html + '</div>'; 
     $('.myfld').html(html); 
     $(function() { 
      $("#dob_"+x).datepicker({ /*dateFormat: 'dd/mm/yy', */defaultDate : '1/1/1980',changeYear : true,changeMonth : true }); 
     }); 
    }  
    var html_end = '</div>'; 
    $('.myfld').append(html_end); 
}); 

我能夠產生HTML文本框在框中nuber輸入，但jQuery的壓延機適用於只有最後一個輸入字段！什麼原因 ？我需要把日曆代碼放在其他地方嗎？

DEMO

Answer 1

$('.myfld').html(html); 

的問題。您每次循環並替換Html。所以在最後一次替換所有的html。但是你只爲最後一個元素設置日期選擇器。等待循環後添加html到'.myfld'。或者你可以添加一個class =「dob」給你的dob元素。然後指派日期選擇器將它們一次全部使用類，如：

$(".dob").datepicker({ /*dateFormat: 'dd/mm/yy', */defaultDate : '1/1/1980',changeYear : true,changeMonth : true }); 

Answer 2

這裏當日歷彈出文本框的小提琴：

fiddle

你必須DOB類添加到每texbox，然後將datepicker函數添加到每個dob類。

$(".dob").datepicker({});