Widget: Fix _on to use element argument for delegated events. Fixes #8658 - Widget: this._on delegates using instance.widget() instead of passed element

Author: jzaefferer

tests/unit/widget/widget_core.js

@@ -760,6 +760,30 @@ test( "_on() with delegate", function() {
 	$.ui.testWidget();
 });
 
+test( "_on() with delegate to descendent", function() {
+	expect( 4 );
+	$.widget( "ui.testWidget", {
+		_create: function() {
+			this.target = $( "<p><strong>hello</strong> world</p>" );
+			this.child = this.target.children();
+			this._on( this.target, {
+				"keyup": "handlerDirect",
+				"keyup strong": "handlerDelegated"
+			});
+			this.child.trigger( "keyup" );
+		},
+		handlerDirect: function( event ) {
+			deepEqual( event.currentTarget, this.target[ 0 ] );
+			deepEqual( event.target, this.child[ 0 ] );
+		},
+		handlerDelegated: function( event ) {
+			deepEqual( event.currentTarget, this.child[ 0 ] );
+			deepEqual( event.target, this.child[ 0 ] );
+		}
+	});
+	$.ui.testWidget();
+});
+
 test( "_on() to common element", function() {
 	expect( 1 );
 	$.widget( "ui.testWidget", {

ui/jquery.ui.widget.js

@@ -362,17 +362,19 @@ $.Widget.prototype = {
 	},
 
 	_on: function( element, handlers ) {
+		var delegateElement,
+			instance = this;
 		// no element argument, shuffle and use this.element
 		if ( !handlers ) {
 			handlers = element;
 			element = this.element;
+			delegateElement = this.widget();
 		} else {
 			// accept selectors, DOM elements
-			element = $( element );
+			element = delegateElement = $( element );
 			this.bindings = this.bindings.add( element );
 		}
 
-		var instance = this;
 		$.each( handlers, function( event, handler ) {
 			function handlerProxy() {
 				// allow widgets to customize the disabled handling
@@ -396,7 +398,7 @@ $.Widget.prototype = {
 				eventName = match[1] + instance.eventNamespace,
 				selector = match[2];
 			if ( selector ) {
-				instance.widget().delegate( selector, eventName, handlerProxy );
+				delegateElement.delegate( selector, eventName, handlerProxy );
 			} else {
 				element.bind( eventName, handlerProxy );
 			}