$.fn.ondo not use the current collection as the context for the subquery. Instead, they run the query from the document root. In other words, with the following HTML structure:
<div id='blog'> <ul> <li> <h3>I Like Ice Cream</h3> <div> <h3>My Favorite Flavors</h3> <ul>etc.</ul> </div> </li> <!-- more li's with same structure --> </ul> </div>I wanted to set up click handling on the
h3tags to replace the brief summary content in the content div's below with the full entries loaded via Ajax, but ensure that any
h3elements in the content div's did not accidentally become clickable. And, since the div content is arbitrary, that would be a possibility.
So, I tried:
$('#blog>ul').delegate('click', '>li>h3', handler);But, that fails. The
$.fn.findmethod can use a selector that begins with
'>'to indicate that the selector path must begin with the direct children of the starting element. Like,
$('#blog>ul').find('>li>h3').text();would return 'My First Entry'. That works because
finduses the current collection as the context for the selector you pass to it.
But, it turns out that the context for
delegateis the document root; i.e., the same context that
However, I can get the desired behavior by using:
$('#blog>ul').delegate('click', '#blog>ul>li>h3', handler);(And, yes, it would probably be better if I used a class instead of just
h3to indicate that something is a clickable element, but that just fixes things for one specific case, and still leaves the general issue unresolved.)
So, I asked myself, "why does the processing of the query start at the root context instead of with the collection?"
I finally did come up with a possible good use - if you wanted to locate the elements to delegate to using a different path from the root.
Imagine a page with multiple sections, only one of which is "active" at any time. I could set up the delegating click handling on the blog section, and similar handling on other sections, when the page loads. I could add a class like 'active' to the major section that I wanted to be currently active, and control which delegating handlers actually ran without having to constantly be delegating and undelegating.
The code below demonstrates this (you can see it running at http://www.steveclaflin.com/blog-stuff/jquery/active-delegating.html).