Merge branch 'widget-delegation'

tests/unit/widget/widget_core.js

@@ -89,7 +89,7 @@ test( "jQuery usage", function() {
 				"parameter passed via .pluginName(methodName, param)" );
 			equals( param2, "value2",
 				"multiple parameters passed via .pluginName(methodName, param, param)" );
-			
+
 			return this;
 		},
 		getterSetterMethod: function( val ) {
@@ -153,9 +153,9 @@ test( "direct usage", function() {
 			}
 		}
 	});
-	
+
 	var elem = $( "<div>" )[ 0 ];
-	
+
 	shouldCreate = true;
 	var instance = new $.ui.testWidget( {}, elem );
 	shouldCreate = false;
@@ -163,7 +163,7 @@ test( "direct usage", function() {
 	equals( $( elem ).data( "testWidget" ), instance,
 		"instance stored in .data(pluginName)" );
 	equals( instance.element[ 0 ], elem, "element stored on widget" );
-	
+
 	var ret = instance.methodWithParams( "value1", "value2" );
 	equals( ret, instance, "plugin returned from method call" );
 
@@ -193,7 +193,7 @@ test( "error handling", function() {
 		equal( msg, "no such method '_privateMethod' for testWidget widget instance",
 			"invalid method call on widget instance" );
 	};
-	$( "<div>" ).testWidget().testWidget( "_privateMethod" );		
+	$( "<div>" ).testWidget().testWidget( "_privateMethod" );
 	$.error = error;
 });
 
@@ -463,7 +463,7 @@ test( ".option() - delegate to ._setOptions()", function() {
 	calls = [];
 	div.testWidget( "option", "foo", "bar" );
 	same( calls, [{ foo: "bar" }], "_setOptions called for single option" );
-	
+
 	calls = [];
 	div.testWidget( "option", {
 		bar: "qux",
@@ -490,7 +490,7 @@ test( ".option() - delegate to ._setOption()", function() {
 	div.testWidget( "option", "foo", "bar" );
 	same( calls, [{ key: "foo", val: "bar" }],
 		"_setOption called for single option" );
-	
+
 	calls = [];
 	div.testWidget( "option", {
 		bar: "qux",
@@ -666,6 +666,39 @@ test( "._bind() to descendent", function() {
 		.trigger( "keydown" );
 });
 
+test( "_bind() with delegate", function() {
+	expect( 8 );
+	$.widget( "ui.testWidget", {
+		_create: function() {
+			this.element = {
+				bind: function( event, handler ) {
+					equal( event, "click.testWidget" );
+					ok(  $.isFunction(handler) );
+				},
+				delegate: function( selector, event, handler ) {
+					equal( selector, "a" );
+					equal( event, "click.testWidget" );
+					ok(  $.isFunction(handler) );
+				},
+				trigger: $.noop
+			};
+			this._bind({
+				"click": "handler",
+				"click a": "handler",
+			});
+			this.element.delegate = function( selector, event, handler ) {
+				equal( selector, "form fieldset > input" );
+				equal( event, "change.testWidget" );
+				ok(  $.isFunction(handler) );
+			};
+			this._bind({
+				"change form fieldset > input": "handler"
+			});
+		}
+	});
+	$.ui.testWidget();
+});
+
 test( "._hoverable()", function() {
 	$.widget( "ui.testWidget", {
 		_create: function() {
@@ -703,14 +736,14 @@ test( "._focusable()", function() {
 		this._focusable( this.element.children() );
 	}
 	});
-	
+
 	var div = $( "#widget" ).testWidget().children();
 	ok( !div.hasClass( "ui-state-focus" ), "not focused on init" );
 	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
 	div.trigger( "focusout" );
 	ok( !div.hasClass( "ui-state-focus" ), "not focused after blur" );
-	
+
 	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
 	$( "#widget" ).testWidget( "disable" );
@@ -719,7 +752,7 @@ test( "._focusable()", function() {
 	ok( !div.hasClass( "ui-state-focus" ), "can't focus while disabled" );
 	$( "#widget" ).testWidget( "enable" );
 	ok( !div.hasClass( "ui-state-focus" ), "enabling doesn't reset focus" );
-	
+
 	div.trigger( "focusin" );
 	ok( div.hasClass( "ui-state-focus" ), "focused after explicit focus" );
 	$( "#widget" ).testWidget( "destroy" );

ui/jquery.ui.menu.js

@@ -38,52 +38,37 @@ $.widget( "ui.menu", {
 				id: this.menuId,
 				role: "menu"
 			})
+			// need to catch all clicks on disabled menu
+			// not possible through _bind
 			.bind( "click.menu", function( event ) {
-				var item = $( event.target ).closest( ".ui-menu-item:has(a)" );
 				if ( self.options.disabled ) {
-					return false;
+					event.preventDefault();
 				}
-				if ( !item.length ) {
-					return;
-				}
-				// 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 );
-				}
-			})
-			.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._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 ( !this.active || ( this.active[ 0 ] !== target[ 0 ] ) ) {
+					this.focus( event, target );
+				}
+				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": "blur",
+			"focus": function( event ) {
+				this.focus( event, $( event.target ).children( ".ui-menu-item:first" ) );
+			},
+			"blur": "collapseAll"
+		});
+
 		this.refresh();
 
 		this.element.attr( "tabIndex", 0 ).bind( "keydown.menu", function( event ) {

ui/jquery.ui.widget.js

@@ -305,9 +305,10 @@ $.Widget.prototype = {
 			element = $( element );
 			this.bindings = this.bindings.add( element );
 		}
+
 		var instance = this;
 		$.each( handlers, function( event, handler ) {
-			element.bind( event + "." + instance.widgetName, function() {
+			function handlerProxy() {
 				// allow widgets to customize the disabled handling
 				// - disabled as an array instead of boolean
 				// - disabled class as method for disabling individual parts
@@ -317,7 +318,15 @@ $.Widget.prototype = {
 				}
 				return ( typeof handler === "string" ? instance[ handler ] : handler )
 					.apply( instance, arguments );
-			});
+			}
+			var match = event.match( /^(\w+)\s*(.*)$/ ),
+				eventName = match[1] + "." + instance.widgetName,
+				selector = match[2];
+			if ( selector ) {
+				element.delegate( selector, eventName, handlerProxy );
+			} else {
+				element.bind( eventName, handlerProxy );
+			}
 		});
 	},