Can't init more than one date picker on element added via ajax

[digitalchild]

I have an element that is added via ajax with 2 datepicker fields. I'm attempting to init these once the ajax element has loaded. If I use a class selector I get an error telling saying "Creating more than one DatePicker for the same element." Code I'm using to generate the datepicker is the following. What am I doing wrong?

$( '.ink-datepicker' ).each( function() { Ink.requireModules(['Ink.UI.DatePicker_1'],function(DatePicker) { var datePickerObj = new DatePicker( '.ink-datepicker' ); }); });

[pedrocorreia]

I believe that whats happening is that since you're using a css selector to get the element to initialize the constructor is always picking the first element it can find. So in the second cycle of the each method it also picks up the first one.

Have you tried passing the element in the .each()callback function?

edit: Was just giving a read of the jQuery api documentation and you can simply use the this keyword to refer to the current element in the iteration.

http://api.jquery.com/each/

$( '.ink-datepicker' ).each( function( ) { 
    Ink.requireModules(['Ink.UI.DatePicker_1'],function(DatePicker) { 
        var datePickerObj = new DatePicker( this );
    }); 
});