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。但是你只为最后一个元素设置了datepicker。要么等到循环之后要将html添加到'.myfld'。或者你可以在你的dob元素中添加一个class =“dob”。然后使用类如下的类将所有日期选择器分配给它们：

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

Answer 2

这里是日历弹出文本框的小提琴：

fiddle

你必须将dob类添加到每个texbox，然后将datepicker函数添加到每个dob类。

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

jQuery datepicker在循环中不起作用

2 个答案: