如何在AJAX加载的标签中初始化jquery函数？

Question

I have my AJAX loaded tabs working correctly and this is the code:

<div id="tabs">
  <ul>
    <li><a href="../about-leadership-admin-ajax/">Leadership / Admin</a></li>
    <li><a href="../about-sales-marketing-ajax/">Sales & Marketing</a></li>
    <li><a href="../about-service-desk-technicians-ajax/">Service Desk Technicians</a></li>
    <li><a href="../about-technology-consultants-ajax/">Technology Consultants</a></li>
    <li><a href="../about-manufacturing-consultants-ajax/">Manufacturing Consultants</a></li>
    <li><a href="../about-salesforce-cpm-consultants-ajax/">Salesforce/CPM Consultants</a></li>
    <li><a href="../about-developers-ajax/">Developers</a></li>
  </ul>
</div>

and my initilization script:

<script>
  jQuery(function() {
    jQuery( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper-clearfix" );
    jQuery( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );

    jQuery( "#tabs" ).tabs({
      beforeLoad: function( event, ui ) {
        ui.jqXHR.error(function() {
          ui.panel.html(
            "Couldn't load this tab. We'll try to fix this as soon as possible." );
        });
      }
    });
  });
</script>

I have a jQuery slider on each one of the tabs. Only the first one (in the first tab that is loaded) works correctly until I navigate to a new one. When I come back to the first tab the slider is all screwed up. The initialization script I need to have on each AJAX loaded tab is:

<script>
jQuery(document).ready(function(){
jQuery('#horiz_container_outer').horizontalScroll();
});
</script>

I know (document).ready does not work. I need to know where and what to place in my tabs initialization script to make this work.

I know I need to use one of several functions in jQuery but I have no idea what to use and where. My options look like .load(), .bind(), .success().

I would love it if someone could point me in the right direction and be specific. Thanks in advance. I am also willing to pay for a solution:)

Answer 1

Try using the activate event

jQuery( "#tabs" ).tabs({
  beforeLoad: function( event, ui ) {
    ui.jqXHR.error(function() {
      ui.panel.html(
        "Couldn't load this tab. We'll try to fix this as soon as possible." );
    });
  }
  activate: function( event, ui ) {
    jQuery('#horiz_container_outer').horizontalScroll();
  }
});