jQuery .live() for GUI changer function

I use a nice way to make collapsible fieldsets using Collapsible jQuery Plugin:

$("fieldset").collapse();

Everything works fine while no fieldsets are added dynamically. It is poss开发者_开发技巧ible to bind events like 'click' using .live() function, I wonder if it's possible to automatically add .collapse() to all dynamically added fieldsets.

I tried:

$("fieldset").live('ready', collapse);

and

$("fieldset").live('ready', function () {
    $("fieldset").collapse();
});

But it doesn't work. Changing 'ready' to 'load' doesn't help too.

Is there any way to apply some UI goodies like ".colapse()" to new dynamically inserted DOM elements?

Thanks a lot.

I had kind of a similar issue (kind of), so this may help you out...

Making a jQuery UI Slider with live()

I basically had to initialize some elements with a jquery plugin using live() and a custom event.

If it is dynamic, then why are you not attaching the collapse plugin to the DOM object after it is created?

var html = "<fieldset id='my-fieldset'></fieldset>";

$('body').appendTo(html);

$('#my-fieldset').collapse();

jQuery .live() method needs some event to be triggered. It's not possible to use .live() or .delegate() to process newly added content through the AJAX callback.

In order to do so you need to use livequery plugin.

This how to replace $.livequery with $.delegate or $.live forum thread describes the details of the problem and solution.

In my case the solution (with livequery plugin enabled) is:

 $('fieldset').livequery(function () {
     $(this).collapse();
 });

Works like a charm :-)