Tabs: mouseover/focus handling for added tabs, plus test, fixes #4097…

… as well as focus/blur handling when using keyboard

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.");
 });
 

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));