diff --git a/tests/unit/tabs/tabs_methods.js b/tests/unit/tabs/tabs_methods.js index 2fc309b57..61ddee642 100644 --- a/tests/unit/tabs/tabs_methods.js +++ b/tests/unit/tabs/tabs_methods.js @@ -43,6 +43,18 @@ test('disable', function() { }); test('add', function() { + expect(3); + + el = $('#tabs1').tabs(); + el.tabs('add', "#new", 'New'); + + var added = $('li:last', el).simulate('mouseover'); + ok(added.is('.ui-state-hover'), 'should add mouseover handler to added tab'); + added.simulate('mouseout'); + var other = $('li:first', el).simulate('mouseover'); + ok(other.is('.ui-state-hover'), 'should not remove mouseover handler from existing tab'); + other.simulate('mouseout'); + ok(false, "missing test - untested code is broken code."); }); diff --git a/ui/ui.tabs.js b/ui/ui.tabs.js index 0938a9204..51a818b43 100644 --- a/ui/ui.tabs.js +++ b/ui/ui.tabs.js @@ -172,20 +172,6 @@ $.widget("ui.tabs", { else onShow(); } - // states - if (o.event != 'mouseover') { - var handleState = function(state, el) { - if (el.is(':not(.ui-state-disabled)')) el.toggleClass('ui-state-' + state); - }; - this.$lis.bind('mouseover.tabs mouseout.tabs', function() { - handleState('hover', $(this)); - }); - // TODO focus/blur don't seem to work with namespace - this.$tabs.bind('focus.tabs blur.tabs', function() { - handleState('focus', $(this).parents('li:first')); - }); - } - // clean up to avoid memory leaks in certain versions of IE 6 $(window).bind('unload', function() { self.$lis.add(self.$tabs).unbind('.tabs'); @@ -194,9 +180,10 @@ $.widget("ui.tabs", { } // update selected after add/remove - else + else { o.selected = this.$lis.index(this.$lis.filter('.ui-tabs-selected')); - + } + // update collapsible this.element[o.collapsible ? 'addClass' : 'removeClass']('ui-tabs-collapsible'); @@ -210,6 +197,21 @@ $.widget("ui.tabs", { // reset cache if switching from cached to not cached if (o.cache === false) this.$tabs.removeData('cache.tabs'); + // remove all handlers before, tabify may run on existing tabs after add or option change + this.$lis.add(this.$tabs).unbind('.tabs'); + + if (o.event != 'mouseover') { + var handleState = function(state, el) { + if (el.is(':not(.ui-state-disabled)')) el.toggleClass('ui-state-' + state); + }; + this.$lis.bind('mouseover.tabs mouseout.tabs', function() { + handleState('hover', $(this)); + }); + this.$tabs.bind('focus.tabs blur.tabs', function() { + handleState('focus', $(this).parents('li:first')); + }); + } + // set up animations var hideFx, showFx; if (o.fx) { @@ -264,7 +266,7 @@ $.widget("ui.tabs", { } // attach tab event handler, unbind to avoid duplicates from former tabifying... - this.$tabs.unbind('.tabs').bind(o.event + '.tabs', function() { + this.$tabs.bind(o.event + '.tabs', function() { var $li = $(this).parents('li:eq(0)'), $hide = self.$panels.filter(':visible'), $show = $(self._sanitizeSelector(this.hash));