jQuery. Apply selector to every field in a dynamic form

Question

I have a form which is built dynamically using this jQuery plugin

http://code.google.com/p/jquery-dynamic-form/

When I duplicate a div, all the fields in the div are duplicated, and -as plugin docs state- brackets are added to the field name

I use also jQueryUI. I use the datePicker plugin

$("#myDynDateField").datepicker();

It works fine when there's only 1 instance of this datePicker field. When I duplicate the whole div, the datePicker field is also duplicated, and errors begin

inst is undefined
uncaught exception: Missing instance data for this datepicker  

1) How can I use a jQuery selector that covers all the duplicated fields also?
2) How can I make sure that every duplicated datePicker field will have its right instance, etc.?

Thanks a lot in advance,

Answer 1

I'm not sure if you are using $.clone() to 'duplicate' your elements, but if you are, the issue might stem from passing in the true flag. e.g. $('div#id').clone(true) . This clones the element as well as the events attached to it (and it's children). However using this on jquery ui elements can ruin a few things, so it's better to redefine an element's ui info after its duplication.

Chances are, though that you are not controlling it with that granularity. More or less, you are running into problems because jqueryui isn't aware of these duplicated form fields. I would suggest removing the 'duped' version of the datepicker field and replacing it with a fresh datepicker field.

Something like this:

// code to duplicate form
// ...
// Now replace the element with one just like it but without any events
$('#newDupedForm')
    .find('.datefield')
    .replaceWith(
        $(this).clone(false).datepicker(options)
    );

That should get rid of any links to the old jquery ui datepicker from the other element and instantiate a new one, however if there's something I'm missing, you could always create the input element from scratch and do the replaceWith with that.