Question

Just a simple question, but I cannot seem to bind a plugin function to a live element that was cloned.

$('.add-another').live('click', function()
{
   var self = $(this);
   var clonedElement = self.parents('.row').clone();

   clonedElement.find('input.datepicker').bind('click', function()
   {
       $(this).datepick({ rangeSelect: true });
   });
});

I’m using this plugin (I’m not using jQueryUI nor it’s datepicker). So how can I bind a plugin function to a cloned/live element?

EDIT: Here’s a jsFiddle demo.

Answer 1

You’re binding to an id (#add-another). The standard says that there can be only one element with a given ID at any time.

So, this won’t really work as intended. Change the id to a class(i.e. the # to an .) and try again 🙂

Another possible problem may be that the HTML simply doesn’t have the structure you expect it to and some of the queries are failing. We’d be able to debug that if you post the HTML structure 🙂

Edit:
You were binding to the “click” event, which was actually wrong – you can create the datepicker at the same time you create the HTML element.

Here’s the new code:

$('.row input.datepicker').datepick({ rangeSelect: true });

$('span.add-another').live('click', function()
{
    var self = $(this);
    var clone = self.parents('.row').clone();

    $('input.datepicker', clone).datepick({ rangeSelect: true });
    $(clone).insertAfter(self.parents('.row')).hide().slideDown('fast');

    self.remove();
});

Also, I have bad news for you – the datepicker plugin is broken 🙂
The datepicker itself seems to only be able to show one datepicker on a page.
You should either research how to show several, or just use jQueryUI.

As you can see, here only the original object has a datepicker: http://jsfiddle.net/qZn8d/7/
And here only the first added object has a datepicker: http://jsfiddle.net/qZn8d/6/

So, yeah, the plugin is broken, sorry 🙂