Skip to content
Permalink
Browse files
Add .delegate() and .undelegate(). An alternative to using .live() wh…
…ich goes from a single root and filters by the specified selectors. Should be used like do: .delegate(td, hover, someFn);. Fixes #6005.
  • Loading branch information
jeresig committed Feb 1, 2010
1 parent cb65daa commit 31432e048f879b93ffa44c39d6f5989ab2620bd8
Showing 2 changed files with 433 additions and 38 deletions.
@@ -866,6 +866,20 @@ jQuery.fn.extend({

return this;
},

delegate: function( selector, types, data, fn ) {
return this.live( types, data, fn, selector );
},

undelegate: function( selector, types, fn ) {
if ( arguments.length === 0 ) {
return this.unbind( "live" );

} else {
return this.die( types, null, fn, selector );
}
},

trigger: function( type, data ) {
return this.each(function() {
jQuery.event.trigger( type, data, this );
@@ -910,8 +924,10 @@ jQuery.fn.extend({
});

jQuery.each(["live", "die"], function( i, name ) {
jQuery.fn[ name ] = function( types, data, fn ) {
var type, i = 0;
jQuery.fn[ name ] = function( types, data, fn, origSelector /* Internal Use Only */ ) {
var type, i = 0,
selector = origSelector || this.selector,
context = origSelector ? this : jQuery( this.context );

if ( jQuery.isFunction( data ) ) {
fn = data;
@@ -928,13 +944,13 @@ jQuery.each(["live", "die"], function( i, name ) {

if ( name === "live" ) {
// bind live handler
jQuery( this.context ).bind( liveConvert( type, this.selector ), {
data: data, selector: this.selector, live: type
context.bind( liveConvert( type, selector ), {
data: data, selector: selector, live: type
}, fn );

} else {
// unbind live handler
jQuery( this.context ).unbind( liveConvert( type, this.selector ), fn ? { guid: fn.guid + this.selector + type } : null );
context.unbind( liveConvert( type, selector ), fn ? { guid: fn.guid + selector + type } : null );
}
}

@@ -1002,7 +1018,7 @@ function liveHandler( event ) {
}

function liveConvert( type, selector ) {
return "live." + (type ? type + "." : "") + selector.replace(/\./g, "`").replace(/ /g, "&");
return "live." + (type && type !== "*" ? type + "." : "") + selector.replace(/\./g, "`").replace(/ /g, "&");
}

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +

3 comments on commit 31432e0

@louisremi
Copy link
Contributor

@louisremi louisremi commented on 31432e0 Feb 2, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We now have two ways to do event delegation in jQuery.
One uses the good old jQuery syntax we all know but seems somewhat magical before you know how event delegation works.
The other requires a good understanding of event delegation but seems much better from a performance point of view.

Is delegate already compatible with mouseenter/mouseleave, change, submit and focus/blur?

@jeresig
Copy link
Member Author

@jeresig jeresig commented on 31432e0 Feb 2, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. As you'll note, delegate just uses live - therefore it supports everything that live supports.

@louisremi
Copy link
Contributor

@louisremi louisremi commented on 31432e0 Feb 2, 2010

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great!

Please sign in to comment.