The other day I've started a discussion on the jQuery dev list about event delegates and how the live() function can be improved with a few little tweaks from Zach Leatherman Blog - Performance Caveat with jQuery Selectors and Live Events
After reading at Zach's Blog I've was able to create a little plugin that I think will also be useful to those who are looking for an alternative way to bind live events to an element without first querying the document.
Example:
$('#sidebar').delegate('li :click',callback);
From my test in FF 3.5 and IE7 I was able to bind an event to a ul element with over 800 li elements with excellent performance!
Here's how to use the plugin:
$(context).delegate('click',callback) // same as live()
$(context).delegate('li:even, li:odd :click',callback) // supports multiple selectors
$(context).delegate('li :click.namespace',callback) // supports event namespace
$(context).delegate('li:first a :click',callback) // supports pseudo classes
$(context).delegate('li a :click mouseover',callback) // support future multiple event format
The delegate method will use the same rules as that of the live() method.
Note: jQuery live() only supports single events: Unlike .bind(), only a single event can be bound in each call to the .live() method.
Here's the plugin code:
<script type="text/javascript">
jQuery.fn.delegate = function(event,fn) {
var e,p,s;
if (event.indexOf(':')) {
s = event.substr(0,event.lastIndexOf(':'));
event = event.replace(s+':','');
}
if (!s) e = this;
else {
p = this.selector + ' ';
if (!s.indexOf(',')) s = p + s;
else s = p+(s.split(/,/)).join(','+p);
e = jQuery(document); e.selector = s
}
e.live(event,fn);
return this;
}
</script>
Working example:
<script type="text/javascript">
$(function(){
$('#sidebar').delegate('li :mouseover',cb);
$('#sidebar').delegate('li :mouseout',cb);
//$('#sidebar').delegate('li:first, li:last :click',cb);
});
function cb (e){
var c = (e.type=='mouseout') ? '#fff':'#ffcc00';
$(e.target).css('background',c);
}
</script>
<div id="sidebar">
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<!-- copy and paste more li elements here -->
</ul>
</div>
Posts: 20
Reply #17 on : Wed November 25, 2009, 14:18:41
Posts: 20
Reply #16 on : Fri July 11, 2014, 05:27:04
Posts: 20
Reply #15 on : Fri November 14, 2014, 06:16:13
Posts: 20
Reply #14 on : Mon December 01, 2014, 12:44:46
Posts: 20
Reply #13 on : Sat March 07, 2015, 07:30:21
Posts: 20
Reply #12 on : Wed April 22, 2015, 14:04:06
Posts: 20
Reply #11 on : Wed May 13, 2015, 11:45:01
Posts: 20
Reply #10 on : Mon July 04, 2016, 14:38:21
Posts: 20
Reply #9 on : Sat October 13, 2018, 22:52:18
Posts: 20
Reply #18 on : Wed November 18, 2009, 06:47:24