Added support for multiple live event handlers, live hover, and live …

…focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.
jquery · Jan 23, 2010 · 01f7202 · 01f7202
1 parent b9ca157
commit 01f7202
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 9 deletions.
diff --git a/src/event.js b/src/event.js
@@ -838,23 +838,38 @@ jQuery.fn.extend({
 
 	hover: function( fnOver, fnOut ) {
 		return this.mouseenter( fnOver ).mouseleave( fnOut || fnOver );
-	},
+	}
+});
+
+jQuery.each(["live", "die"], function( i, name ) {
+	jQuery.fn[ name ] = function( types, data, fn ) {
+		var type, i = 0;
 
-	live: function( type, data, fn ) {
 		if ( jQuery.isFunction( data ) ) {
 			fn = data;
 			data = undefined;
 		}
 
-		jQuery( this.context ).bind( liveConvert( type, this.selector ), {
-			data: data, selector: this.selector, live: type
-		}, fn );
+		types = types.split( /\s+/ );
 
-		return this;
-	},
+		while ( (type = types[ i++ ]) ) {
+			type = type === "focus" ? "focusin" : // focus --> focusin
+					type === "blur" ? "focusout" : // blur --> focusout
+					type === "hover" ? types.push("mouseleave") && "mouseenter" : // hover support
+					type;
+
+			if ( name === "live" ) {
+				// bind live handler
+				jQuery( this.context ).bind( liveConvert( type, this.selector ), {
+					data: data, selector: this.selector, live: type
+				}, fn );
 
-	die: function( type, fn ) {
-		jQuery( this.context ).unbind( liveConvert( type, this.selector ), fn ? { guid: fn.guid + this.selector + type } : null );
+			} else {
+				// unbind live handler
+				jQuery( this.context ).unbind( liveConvert( type, this.selector ), fn ? { guid: fn.guid + this.selector + type } : null );
+			}
+		}
+
 		return this;
 	}
 });

diff --git a/test/delegatetest.html b/test/delegatetest.html
@@ -83,6 +83,7 @@ <h2>Change Tests</h2>
 	        <td id='radiofocus' class="red">RADIO</td>
 	        <td id='textfocus' class="red">TEXT</td>
 	        <td id='textareafocus' class="red">TEXTAREA</td>
+	        <td id='boundFocus' class="red">DOCUMENT</td>
 	    </tr>
 	    <tr>
 	        <td>Focusout:</td>
@@ -92,6 +93,25 @@ <h2>Change Tests</h2>
 	        <td id='radioblur' class="red">RADIO</td>
 	        <td id='textblur' class="red">TEXT</td>
 	        <td id='textareablur' class="red">TEXTAREA</td>
+	        <td id='boundBlur' class="red">DOCUMENT</td>
+	    </tr>
+	    <tr>
+	        <td>Live Focus:</td>
+	        <td id='selectlfocus' class="red">SELECT</td>
+	        <td id='mselectlfocus' class="red">MULTI</td>
+	        <td id='checkboxlfocus' class="red">CHECKBOX</td>
+	        <td id='radiolfocus' class="red">RADIO</td>
+	        <td id='textlfocus' class="red">TEXT</td>
+	        <td id='textarealfocus' class="red">TEXTAREA</td>
+	    </tr>
+	    <tr>
+	        <td>Live Blur:</td>
+	        <td id='selectlblur' class="red">SELECT</td>
+	        <td id='mselectlblur' class="red">MULTI</td>
+	        <td id='checkboxlblur' class="red">CHECKBOX</td>
+	        <td id='radiolblur' class="red">RADIO</td>
+	        <td id='textlblur' class="red">TEXT</td>
+	        <td id='textarealblur' class="red">TEXTAREA</td>
 	    </tr>
         </table>
         <h2>Submit Tests</h2>
@@ -136,6 +156,12 @@ <h2>Submit Tests</h2>
 			jQuery(id + "blur").blink();
 		});
 
+		this.bind("focus", function(){
+			jQuery(id + "lfocus").blink();
+		}).bind("blur", function(){
+			jQuery(id + "lblur").blink();
+		});
+
 		return this.bind("change", function(e){
 			jQuery(id + "bind").blink();
 		}).live("change", function(e){
@@ -163,7 +189,23 @@ <h2>Submit Tests</h2>
 			next();
    		});
 	};
+
+	$(document).bind("focusin", function() {
+		jQuery("#boundFocus").blink();
+	});
 
+	$(document).bind("focusout", function() {
+		jQuery("#boundBlur").blink();
+	});
+
+	$("td.red").live("hover", function(e) {
+		if ( e.type === "mouseenter" ) {
+			$(this).css("backgroundColor","green");
+		} else {
+			$(this).css("backgroundColor","");
+		}
+	});
+
 	$(".select_test").addChangeTest("#select");
 	$(".mselect_test").addChangeTest("#mselect");
 	$(".checkbox_test").addChangeTest("#checkbox");

diff --git a/test/unit/event.js b/test/unit/event.js
@@ -864,6 +864,20 @@ test(".live()/.die()", function() {
 	jQuery("#nothiddendiv div").die("click");
 });
 
+test("live with multiple events", function(){
+	expect(1);
+
+	var count = 0;
+	var div = jQuery("div#nothiddendivchild")
+
+	div.live("click submit", function(){ count++; });
+
+	div.trigger("click");
+	div.trigger("submit");
+
+	equals( count, 2, "Make sure both the click and submit were triggered." );
+});
+
 test("live with change", function(){
 	var selectChange = 0, checkboxChange = 0;