jQuery UI ajax tabs - requests multiplying when loading links within tabs

Question

I'm using jQuery UI tabs, loading the tab content via ajax. Content may contain links which I want to load within the selected tab. To achieve that, I use this code

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

I use live() so that the links loaded after the initial load are also covered.

Now, imagine a situation where you have 2 tabs. First, the user is in tab_a, which contains links. The user clicks a link within tab_a and it opens fine. Then, tab_b is selected, then tab_a, and the link within again.

so that's: tab_a -> link within -> tab_b -> tab_a -> link within

Now after tab_a is selected for the second time, and the link within after that, I get two requests when link is clicked. If I repeat the process, once I click on link within tab_a, I'll get three requests and so on.

I can't quite get the grip on what's going on in here.

.targetBlank class is for links that are not intended to open within a tab. It's not particularly relevant, but I thought I'd share it as well, if it turns out to be important somehow.

Answer 1

You need to set a flag if the content has already been bound, or unbind the content on tab change.

Something like ui.panel.find('a').unbind() should do the trick. Make sure you put it in the tab change callback.