Opening links in ajax tabs fires multiple requests with jQuery 1.4.4

[spilja]

Steps to reproduce bug: Define two tabs (tab_a and tab_b) which load content via ajax. Define that the links within a tab open within a tab, using the example on the ui.tabs page

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

Open tab_a and then link_a (a link within tab_a). One request is fired. Select tab_b, then tab_a and then link_a. Two requests are fired. Now select tab_b, then tab_a, then link_a again. Three requests are fired.

This bug occurs when using jqueryui 1.8.7 with jquery 1.4.4. When using jquery 1.4.2 instead, this does not happen.

[spilja]

It seems this occurs only when using live() to bind the click event, like this

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

This problem is not restricted to ui.tabs only, I managed to reproduce it using ui.dialog as well.

jQuery 1.4.4 and 1.4.3 seem affected, 1.4.2 is fine.

[Scott González]

You're binding the events every time a load occurs, which is resulting in multiple bindings. This really defeats the purpose of using .live().

[spilja]

Replying to scott.gonzalez:

You're binding the events every time a load occurs, which is resulting in multiple bindings. This really defeats the purpose of using .live().

If I unbind the event before or after click, .live() doesn't work for newly loaded links. I.E. if I have tab_a with loaded with content_a which has a link_a, clicking link_a loads the correct content. However if the newly loaded content has a link_b, then link_b does not open within tab_a.

It seems that

$(ui.panel).load(this.href); 

does not fire tabsload event, which means that the defined tabs load event fires only on actual tab click, not when tab content is loaded via href within a tab.

edit:

Nevermind. .live() had a bug in 1.4.2 which caused tabs to work as described for me. Instead, the event should bubble until explicitly unbound with .die()