Initializing jQuery ui widgets dynamically

Question

I'm trying to have the built in jQuery widgets apply to dynamic content, for example ajax calls or DOM manipulations such as cloning.

Right now I have something that works, but is a bit of a hack, and I would like to see your suggestions for improving this. The thing to remember is that the JS is being generated by PHP, I want to avoid a situation where I need to deal with creating JS for individual pages. As it is I can just define a widget type, set some variables, and let PHP generate the JS. Reason is I need to pass variables from a database and provide on the fly localization to the widgets.

jQuery('body').delegate('.juiDateStart', 'focusin', function (e) {
    $(this).datepicker({
        'minDate': 0,
        'onClose': function () {
            juiDtp_343875e72a11870172ae2922f7dd9f4f($(this));
        }
    });
});

The above code works fine for cloning and ajax, but obviously having to init the date picker on every focusin is not an ideal solution. I am also loading auto complete and cascading selects with this system.

Thanks in advance.

Answer 1

Whenever you have dynamically-created Javascript functions like this, I think you can only have so much abstraction before it incurs more overhead. The way that you are initializing this function for each focusin seems to look alright.

Maybe replacing the 'body' part at the opening part of the function with a more detailed class-by-class (or id-by-id) selector would speed up this process a little (i.e. when there are a lot of items on a page...) but the way you have it at the moment (when this was posted,) seems to look alright.