Проблема с DatePicker при динамическом добавлении текстовых полей

Question

В моем проекте у меня есть текстовое поле для даты встречи, я дал id = meetingdate1 этому текстовому полю.если кто-то хочет добавить больше дат встреч, то для этого есть кнопка.После нажатия этой кнопки новое текстовое поле, добавленное ниже к предыдущему текстовому полю, скажем, meetingdate2, meetingdate3 и так далее ... Теперь я хочу добавить текстовое поле datepicker вместо textbox, поэтому для этой цели я использовал jquery.Это работает для 1-го текстового поля, чей id = meetingdate1, но функциональность datepicker не попадает в другие текстовые поля, чьи id = meetingdate2, id = meetingdate3 и т. Д ...

код jquery:

        $("#addButton").live("click", function () {

        if(counter_ldates>10){
            alert("Only 10 dates allowed");
            return false;
        }   

        var newTextBoxDiv = $(document.createElement('div')).attr("id", 'LdateDiv' + counter_ldates);
            newTextBoxDiv.html('<label>Date #'+ counter_ldates + ' : </label>' +
            '<input type="text" name="meetingdate' + counter_ldates + 
            '" id="meetingdate' + counter_ldates +
            '" class="ldatestextbox" value="" style="width: 75px" >');

        newTextBoxDiv.appendTo("#LdatesGroup");

        counter_ldates++;
        $('#ldates_cnt').attr('value', counter_ldates);
    });
    $( "#meetingdate1" ).datepicker();
$( "#meetingdate2" ).datepicker();
$( "#meetingdate3" ).datepicker();
$( "#meetingdate4" ).datepicker();
$( "#meetingdate5" ).datepicker();

Как я могу решить эту проблему DatePicker?

Answer 1

Попробуйте инициализировать средство выбора даты после добавления нового ввода:

newTextBoxDiv.appendTo("#LdatesGroup").find("input").datepicker();

Вы пытаетесь инициализировать средство выбора даты для элементов, которые еще не существуют (*).

Answer 2

Попробуй, уверен, сработает.

newTextBoxDiv.appendTo("#LdatesGroup");
$('#meetingdate' + counter_ldates).datepicker();
counter_ldates++;