Opened 10 years ago

Closed 10 years ago

Last modified 10 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 10 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 10 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 10 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 10 years ago by spilja (previous) (diff)
Note: See TracTickets for help on using tickets.