JQueryUI: automatically add .accordion(); functionality to any new elements with class="accordion"

Question

I'm using the JQuery-UI Accordion, but I'm trying to find a way to not have to initialize it any time any new element is added. Using AJAX I'm inserting html into a page, but on any page load I am having to re-initialize any accordions-

// .ajax handler
success: function(xml) {

    // find accordions
    $("div.accordion").accordion();

}

Is there any way I can automatically have this run any time the DOM has changed? I know there is the livequery plugin -- but is there a simpler more elegant method?

Answer 1

Someone may be able to provide more information, but I'm running into a similar situation. As far as I can tell, you have to dynamically apply the accordion based upon the changed DOM. You could just use the .live function and have it run on load. Something like this has worked for me.

$('div.accordion').live('load', accordion());

See if that helps you.

Answer 2

I've ended up going with a different approach and tying functionality to mapped strings. I now use one attribute for everything . I do a find() based upon that and load it with it's associated value.

pseudo: $(this)$(this).attr('ui:component');