Question

I am trying and failing to add datepicker to inputs that are created dynamically.

They have different id’s and I am specifically targeting the new input and calling datepicker.

In the jsFiddle example below it only works for the 2nd input (first one datepicker is called on) and does not work for any others after that.

Here is the jsFiddle: http://jsfiddle.net/TJfbc/1/ Press the plus sign to add more.

Note: I am aware the first element will not have the datepicker.

Answer 1

Here’s a cleaner alternative

$(function() {
    //append one handler to the parent to detect append actions
    $('.action_items').on('click', '.expand', function() {
        var $el = $(this);
        $el.parent()
            .clone()
            .appendTo($el.closest('.action_items'))
            .find('input')
            .removeClass('hasDatepicker')
            .each(function () {
                newName = this.name.slice(0,6) + (parseInt(this.name.slice(6)) + 1);
                this.name = newName;
                this.id = newName;
             })
            .datepicker();

        //change text, remove original handler, add the remove handler
        $el.text('-').off('click').on('click',function(){
            $(this).parent().remove();
        });
    })
});​