title: jquery tabs load event
body: <p>Below is jQuery's example of how to get links inside the tabs' panel to load within that panel.</p>
  
  <pre><code>$(function(){
     $('#example').tabs({
        load: function(event, ui) {
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
     });
  });
  </code></pre>
  
  <p>However, the line <code>$(ui.panel).load(this.href);</code> will not fire the tabs load event so after you load one link the rest are normal</p>
  
  <p>the reason i ask is cause i have a nested accordion inside my tabs and i want to paginate it via serverside pagination, but when i use the page links it won't remake the accordion.</p>
  
  <p>I want something like this</p>
  
  <pre><code>$(function(){
     $('#example').tabs({
        load: function(event, ui) {
            $(".products", ui.panel).accordion();
            $(".product_link", ui.panel).colorbox();
  
            $('a', ui.panel).click(function() {
                $(ui.panel).load(this.href);
                return false;
            });
        }
     });
  });
  </code></pre>
  
  <p>This seems to get me almost there, however <code>$(ui.panel).load(this.href)</code> only loads it into the first panel no matter what tab i am on</p>
  
  <pre><code>$(function(){
     $('#example').tabs({
        load: function(event, ui) {
            $(".products", ui.panel).accordion();
            $(".product_link", ui.panel).colorbox();
  
            $('a', ui.panel).live('click',function() {
                $(ui.panel).load(this.href,function(){
                             $(".products").accordion();
                             $(".product_link").colorbox();
                          });
                return false;
            });
        }
     });
  })
  </code></pre>
  
  <p>any ideas?</p>