Jquery tab ajax loading new page


When I ajax load a new page on the tab the jquery script that is contained is within $() doesn't get triggered .
Is there a better solution for this.

<div id="tabs">    <ul>        <li><a href="#tabs-1">Nunc tincidunt</a></li>        <li><a href="ajax_page.html">Ajax Tab 1</a></li>    </ul>    <div id="tabs-1">        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>    </div></div>

The second tab gets it content from the server. the ajax_page has a jquery script in $(function(){
$(#id).dialog(); // This would not get loaded as this is with the document ready event..
// which i guess would not be triggered in a tab…


Best Solution

Can you move the script from your ajax_page into your main tabs page and then use the tabs load method which will invoke after the page has been loaded into the tab


$('.selector').tabs({   load: function(event, ui) {      //check tab index is 1 (ajax_page)     if ( $tabs.tabs('option', 'selected') === 1 ){         //your script for ajax_page here     }   }});