Question

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 possible 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.

Answer 1

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 🙂