jQuery Forum

Hi,

I construct a table with dynamic rows and bind the date picker elements to some of the columns. However, when a row is added to the table the date picker works only for the first row and not the rest of them.

I tried to unbind and then rebind the date picker but does not work.

Any help would be great.

Regards,

Arjun

The code is attached for reference.

$('a.add-passenger').click(function(event){

        event.preventDefault();

        counter++;

        var newRow = 

            '<tr>' + 

                '<td><input type="text" name="Name' + counter + '"/></td>' +

                '<td><input type="text" name="DOB' + counter + '"/></td>' +

                '<td><input type="text" name="PassNum' + counter + '"/></td>' +

                '<td><input type="text" name="PassExpiry' + counter + '"/></td>' +

                '<td><input type="text" name="Destination' + counter + '"/></td>' +

                '<td><input type="text" name="DepDate' + counter + '"/></td>' +

                '<td><input type="text" name="ArrDate' + counter + '"/></td>' +

                '<td><a class="remove">remove</a></td>'

            '</tr>';

        $table.append(newRow);

        

        $( "DOB" ).datepicker( "destroy" );

        $("#DOB").datepicker({

        changeMonth: true,

        changeYear: true

        });

        

        $("#ArrDate").datepicker({ 

        minDate: 0,

        maxDate:"+60D",

        numberOfMonths: 2,

        onSelect: function(selected) {

            $("#DepDate").datepicker("option","maxDate", selected)

            }

        });

        

        $("#DepDate").datepicker({

        minDate: 0,

        maxDate: "+60D",

        numberOfMonths: 2,

        onSelect: function(selected) {

            $("#ArrDate").datepicker("option","minDate", selected)

            }

        });

    });