jQuery UI tabs with ajax problem

Recently I was working on one project where I needed to add some tabs with dynamic loading content. After googling a while I found that jQuery UI has already tabs widget offering out of the box functionality.

To use jQuery UI download javascript and css files from http://jqueryui.com .

Idea is that I will have plain html with some url-s that will be loaded inside tab area when user clicks on tab.

So I have something like this:

<div id="tabs">
  <ul>
    <li><a href="someItems.html">Items</a></li>
    <li><a href="someItems2.html">Items2</a></li>
  </ul>
</div>

jQuery will turn this to nice looking tabs widget. When user clicks on first tab, content will be loaded by ajax from someItems.html page.

The problem is that that we want links inside the tab content to display external content inside tabs. To do that we add following:

$("#tabs").tabs({
  load: function(event, ui) {
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  }
});

What we have done here is that we declared on load event for tabs widget and assigned click event through live method for every a element inside #tabs container.

So, after we made this after trying you will notice that only first tab is showing all link content in tab area. If you switch to second tab none of the links work.

To fix this we add:

$("#tabs").tabs({
  load: function(event, ui) {
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  },
  select: function(event, ui) {
    $("#tabs").find("a").die('click');
    $("#tabs").find("a").live('click', function() {
      $(ui.panel).load(this.href);
      return false;
    });
  }
});

We added select event function where we unregister all click events and than again register them with all a elements.

And now we have fully functional dynamic loading tabs.