#6802 closed bug (notabug)

Opened January 04, 2011 01:18PM UTC

Closed January 11, 2011 12:37AM UTC

Last modified January 11, 2011 08:47AM UTC

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.

Attachments (0)

Change History (3)

Changed January 10, 2011 09:25PM UTC by spilja comment:1

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.

Changed January 11, 2011 12:37AM UTC by scottgonzalez comment:2

resolution:	→ invalid
status:	new → closed

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

Changed January 11, 2011 08:47AM UTC by spilja comment:3

_comment0:	Replying to [comment:2 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. → 1294742113360878

_comment0:

Replying to [comment:2 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. → 1294742113360878

Replying to [comment:2 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()