Widget delegation: Update menu to use _bind with delegation. Clean up test.

Author: jzaefferer

tests/unit/widget/widget_core.js

@@ -670,7 +670,6 @@ test( "_bind() with delegate", function() {
 	expect( 8 );
 	$.widget( "ui.testWidget", {
 		_create: function() {
-			var that = this;
 			this.element = {
 				bind: function( event, handler ) {
 					equal( event, "click.testWidget" );
@@ -682,7 +681,7 @@ test( "_bind() with delegate", function() {
 					ok(  $.isFunction(handler) );
 				},
 				trigger: $.noop
-			}
+			};
 			this._bind({
 				"click": "handler",
 				"click a": "handler",
@@ -698,7 +697,7 @@ test( "_bind() with delegate", function() {
 		}
 	});
 	$.ui.testWidget();
-})
+});
 
 test( "._hoverable()", function() {
 	$.widget( "ui.testWidget", {

ui/jquery.ui.menu.js

@@ -37,53 +37,40 @@ $.widget( "ui.menu", {
 			.attr({
 				id: this.menuId,
 				role: "menu"
-			})
-			.bind( "click.menu", function( event ) {
-				var item = $( event.target ).closest( ".ui-menu-item:has(a)" );
-				if ( self.options.disabled ) {
-					return false;
-				}
-				if ( !item.length ) {
-					return;
-				}
+			});
+		this.element.bind("click.menu", function( event ) {
+			if ( self.options.disabled ) {
+				event.preventDefault();
+			}
+		});
+		this._bind({
+			"click .ui-menu-item:has(a)": function( event ) {
+				event.stopImmediatePropagation();
+				var target = $( event.currentTarget );
 				// it's possible to click an item without hovering it (#7085)
-				if ( !self.active || ( self.active[ 0 ] !== item[ 0 ] ) ) {
-					self.focus( event, item );
-				}
-				self.select( event );
-			})
-			.bind( "mouseover.menu", function( event ) {
-				if ( self.options.disabled ) {
-					return;
-				}
-				var target = $( event.target ).closest( ".ui-menu-item" );
-				if ( target.length ) {
-					//Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border
-					target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
-					self.focus( event, target );
+				if ( !this.active || ( this.active[ 0 ] !== target[ 0 ] ) ) {
+					this.focus( event, target );
 				}
-			})
-			.bind( "mouseout.menu", function( event ) {
-				if ( self.options.disabled ) {
-					return;
-				}
-				var target = $( event.target ).closest( ".ui-menu-item" );
-				if ( target.length ) {
-					self.blur( event );
-				}
-			})
-			.bind( "focus.menu", function( event ) {
-				if ( self.options.disabled ) {
-					return;
-				}
-				self.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
-			})
-			.bind( "blur.menu", function( event ) {
-				if ( self.options.disabled ) {
-					return;
-				}
-				self.collapseAll( event );
-			});
+				this.select( event );
+			},
+			"mouseover .ui-menu-item": function( event ) {
+				event.stopImmediatePropagation();
+				var target = $( event.currentTarget );
+				// Remove ui-state-active class from siblings of the newly focused menu item to avoid a jump caused by adjacent elements both having a class with a border
+				target.siblings().children( ".ui-state-active" ).removeClass( "ui-state-active" );
+				this.focus( event, target );
+			},
+			"mouseout .ui-menu-item": function( event ) {
+				this.blur( event );
+			},
+			"focus": function( event ) {
+				this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
+			},
+			"blur": function( event ) {
+				this.collapseAll( event );
+			}
+		});
+
 		this.refresh();
 
 		this.element.attr( "tabIndex", 0 ).bind( "keydown.menu", function( event ) {