It’s a nice tutorial to understand jquery.

I have found another great tutorial site with almost all the information of jquery in php.

http://phpschools.freehostia.com

$(‘table’).delegate(‘tr’,'click’,func);

Btw, JavaScriptMVC’s delegator plugin provides this for all common events (submit) much faster than jQuery.

At the end of the day, we chose to use jQuery’s live because:
1. it was easy to use, and fit in well with our existing jQuery infrastructure
2. we didn’t see the need to “roll our own” because at the end of the day, using live worked well enough for our usages

As a bonus, form events like submit/focus/change can be used with delegation as any other element event and cross-frames events.

Capturing of events is available also for IE, with those I am trying to cover Aria/A11Y compliance.

NW.Event.appendDelegate(‘ul#nav li:nth-child(even)’, ‘mouseover’, fn);

and you can execute that as the very first line of your script without the need to wait for “onload” or “ready” events. The code to load to make this work is about 3Kb.

So it is not just the delegation problem you get solved but a lot of other nasty “non cross-browser” behaviors like “onload/ready” events.

Be that as it may, I only wish/ed to say that there are many ways to do this and we can all agree that the issues in the article would best be resolved using event delegation. Nobody seems to taken issues with the mention of loading 10,000 records initially though – isn’t that a horrible usability concern?

I don’t have a library myself sorry, however I will be glad to see a speed benchmark on that functionality of Mootools (just to have an indication of what you say).

Both the code presented here and jQuery (and I believe Mootools too) are still depending on a “onload” notification to be able to initialize stuff on the page, NWMatcher avoids that problem completely by letting you pre-declare event binding before the elements really exists on the page.

This has the enormous advantage of avoiding the infamous “onload” problem and/or the “ready” event, they are simply not needed anymore and will allow for a real cross-browser early page enlivenment.

I didn’t mean to imply that it was fixing all potential issues with $.live, just that it fixes the issue with needlessly polling a selector before attaching to document. It’s an issue that can be solved in a general sense, while what you’re proposing requires more careful planning and knowledge of the document structure. That said, there’s no reason live couldn’t be further extended to allow a parent node and child selector together, but it still wouldn’t give you the finer-grain control you’re probably looking for. For smaller projects, $.live is great; for more complex work, obviously you’ll want to roll your own.

webkitMatchesSelector() for Webkit browsers
mozMatchesSelector() for Firefox browsers

in the mean time NWMatcher has a match() method, working on browsers that do not have and will never have the above method and it does as fast (or faster) as those new API even on old browsers.

This is what you are looking for, delegation is good, it just doesn’t fit too well with the select() method and binding / wrapping way in current libraries. The match() method is still not appreciated enough by devs, but they will be pushed to use that for complex situations like the one described above.

For event deleagtion I suggest you have a look at NWEvents which is the companion of NWMatcher, these were built as a combo to solve this exact problem. Here is a demo of it’s capabilities:

http://javascript.nwbox.com/cljs-071809/nwapi/nwapi_test.html

Contrary to what is said above this example handles mouseover/mouseout on complex selectors (:nth-of-type) quite efficiently and if you can have a peek at a profiler session you will quickly understand the requirements for the browsers are very low.

Works on any browser IE6 too.

The reason this can be done is the incredible speed of the underlying match() method for which you can see speed benchmarks here on the FuseJS site:

http://www.fusejs.com/nwmatcher/match/

The nightly build tests only appears if you have a nightly build to test ;-)

Prototype has already released an adapter for NWMatcher in their current code base, it will be publicly available really soon, I am really looking forward for the outcome of delegation in that wonderful lib.

The suggestion to set an ID on the table and attach a single event to it is still the best pure solution for a one shot trick that solves, if you need to apply this pattern over all your projects then NWEvents+NWmatcher are very helpful.

findElement: function(event, expression) {
var element = event.target;
if (!expression) return element;
return $(element).closest(expression)[0];
}
...
// Use it like this. With live() this would be overkill
$(document).ready(function() {
$('#parentElement').bind('mousemove', function(event) {
var element = event.findElement('li div.remove');
if (element) { /* do stuff */ }
}
});


Don’t waste your time trying to fix live().

jQuery.extend({
live: function(selector, event, callback) {
var jq = $(document);
jq.selector = selector;
jq.live(event, callback);
}
});

Then just use $.live('.someClass', 'someEvent', someCallback); No expensive selection, full proper event delegation.