jQuery DatePicker not working on newly added row

Question

I've got a gridview that renders as a table. I have an "Add" button and clicking on that, it will create a new row in the table. The row creation is done using "clone(true)" method in jQuery. The cloned row is a dummy row which is hidden in the gridview. I've assigned jQuery DatePicker for a TextBox. It works fine for the existing row. But when I click the DatePicker textbox for newly added row, it doesn't open. It opens for the existing row. What might be the problem?

My code is like:

$("input[name $= 'txtDateOrdered']").datepicker({

        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 1

You have to remove the "hasDatepicker" class from the cloned element first.

$(".selector").removeClass('hasDatepicker').datepicker({
        showButtonPanel     :   true
    ,   showOn              :   'button'
    ,   buttonImageOnly     :   true
    ,   buttonImage         :   '../../Image/calendar.gif'
});

Answer 2

Hard to tell with out seeing your code but..

This is probably due to the jquery used to assign the datepicker to the input is called on page load. Hence when you clone the input the newly cloned input doesn't have the datepicker hooked up to it (since it didn't exist on page load).

You will need to hook up the datepicker to the new input after you call the clone method.