Tabs, UI not working in ajax loaded pages

Tabs, UI not working in ajax loaded pages

How can I make sure that  jQuery and jQuery UI, which is loaded with the parent page is used with the inserted pages?

Using jQuery 1.4.2 and jQuery UI 1.8

Example, the page with the tabs:

  1. <div id="tabs">
  2. <ul>
  3. <li><a href="#tabs-1">Preloaded</a></li>
  4. <li><a href="ajax/content1.html">Tab 1</a></li>
  5. </ul>
  6. </div>

The Ajax page (content1.html):

  1. <!--UI Accordion-->
  2. <div id="accordion">
  3.   <h3><a href="#">First header</a></h3>
  4.   <div>First content</div>
  5.   <h3><a href="#">Second header</a></h3>
  6.   <div>Second content</div>
  7. </div>
  8. <!-- /UI Accordion -->

The sibbling content1.html uses UI accordions. But the accordions don't seem to work as the javascript from the parent page is not applied to the inserted pages.

Any ideas anyone?