Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#6802 closed bug (notabug)

Opening links in ajax tabs fires multiple requests with jQuery 1.4.4

Reported by: spilja Owned by:
Priority: minor Milestone: 1.9.0
Component: ui.tabs Version: 1.8.7
Keywords: Cc:
Blocked by: Blocking:

Description

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.

Change History (3)

comment:1 in reply to:  description Changed 9 years ago by 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.

comment:2 Changed 9 years ago by Scott González

Resolution: invalid
Status: newclosed

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

comment:3 in reply to:  2 Changed 9 years ago by 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()

Last edited 9 years ago by spilja (previous) (diff)
Note: See TracTickets for help on using tickets.