JQuery DatePicker не работает внутри цикла

Question

JQuery DatePicker не работает внутри цикла

0

У меня есть событие 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 введенное в поле, но календарь jquery работает только для последнего поля ввода! В чем причина? Нужно ли мне помещать код календаря в другое место?

DEMO

Nitish 19 дек. 2013, в 17:43

Источник

Теги:

jquery

html

loops

jquery-ui-datepicker

2 ответа

0

Здесь скрипка, в которой капля всплывает из текстового поля:

играть на скрипке

Вы должны добавить класс dob в каждый texbox, а затем добавить функцию datepicker для каждого класса dob.

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

tilda 19 дек. 2013, в 14:48

0

Привет @ тильда. well $( ".dob" ).datepicker({}); делает календарь всплывающим без нажатия на текстовое поле. Это, конечно, не то, что я ищу!
Nitish 19 дек. 2013, в 17:12
0

Я не уверен, что понимаю, где вы хотите, чтобы календарь всплывал, но вы можете еще раз проверить мою скрипку? Я случайно с / п твой вместо моего ..
tilda 19 дек. 2013, в 17:18

Ещё вопросы

Привет @ тильда. well $( ".dob" ).datepicker({}); делает календарь всплывающим без нажатия на текстовое поле. Это, конечно, не то, что я ищу!
Я не уверен, что понимаю, где вы хотите, чтобы календарь всплывал, но вы можете еще раз проверить мою скрипку? Я случайно с / п твой вместо моего ..

nathan hayfield · Accepted Answer · 2013-12-19T15-27-00.000Z

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

это проблема. Вы зацикливаете и заменяете Html каждый раз. Поэтому в последний раз вы заменяете все html. Но вы устанавливаете только дату для последнего элемента. Либо дождаться цикла после добавления html в '.myfld'. Или вы можете добавить class= "dob" в ваши элементы dob. Затем назначьте datepicker им все сразу, используя класс, например:

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

Ну, это работает и не работает! Календарь dob без нажатия на текстовое поле dob ! Смотрите мою обновленную скрипку
Я $('.myfld').append(html); html $('.myfld').append(html); после цикла, а также создать цикл для функции datepicker тоже. И работает сейчас!