Added support for multiple live event handlers, live hover, and live focus/blur (mapped to focusin/focusout). Fixes #5804, #5801, #5852.

This commit is contained in:
Irae Brasil 2010-01-23 11:56:24 -05:00 committed by jeresig
parent b9ca157998
commit 01f72026ec
3 changed files with 80 additions and 9 deletions

View File

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

View File

@ -83,6 +83,7 @@
<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 @@
<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 @@
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 @@
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");

View File

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