jquery ui accordion not working on a dynamically added tab

I would like to add the accordion to a dynamically added tab. This tab is generated by the post back data from the server. 开发者_JS百科What should I do on this?

The post back data is something like

<div id ="newtab">
<div id = "accordion"> ...</div>
...
</div>

I have

$("#accordion1).accordion();

before the tab is added, but it is not working.

I was searching for a solution to a similar problem when I came across this post. But here you would have to import a plugin.
I tried another option and it worked for me.

when dynamic data is added then call the destroy method of the accordion. like this:

.accordion( "destroy" );

and initialize the accordion again with the same options, you applied on the div earlier :)

Seems like you've already identified the problem in the question:

$("#accordion1).accordion();

before the tab is added, but it is not working.

You need to initialize the accordion again after the new elements are added to the DOM (i.e. in the success function of your AJAX call).

Your jQuery selector $("#accordion"), is only selecting elements that are currently in the document. You could use a plugin like .livequery to call the function you want automatically on new elements.

If you're not opposed to using the livequery plugin mentioned above, here's an example:

$("#accordion").livequery(function () {
    $(this).accordion();
});

This will make any element added to the DOM with the id #accordion into an accordion.

Example: http://jsfiddle.net/andrewwhitaker/HBFnJ/