Hello. I like $.delegate but it doesn't quite work the way I'd expect.
I need to use sudara's fork to get it to work at all, but even then I
have trouble whenever I use a selector containing a space. I've looked
at the source and can't see what the problem is.
Here's a test case. The animals div works the way I want. Click on the
Animals h2 to raise an 'h2' alert; Dog or Otter to raise an 'li'
alert.
For the fruits div, I've changed the 'li' selector to 'ul li'. I would
think that this should not change the behaviour, but now all clicks in
the div go to the 'ul li' handler, easily seen if you click the Fruits
h2.
<html>
<head>
<script src="jquery.js" type="text/javascript" charset="utf-8"></
script>
<script src="lowpro.jquery.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$('#animals').click($.delegate({
'li': function (e) { alert('li'); },
'h2': function (e) { alert('h2'); }
}));
$('#fruits').click($.delegate({
'ul li': function (e) { alert('li'); },
'h2': function (e) { alert('h2'); }
}));
});
</script>
</head>
<body>
<div id="animals">
<h2>Animals</h2>
<ul>
<li>Dog</li>
<li>Otter</li>
</ul>
</div>
<div id="fruits">
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Durian</li>
</ul>
</div>
</body>
</html>
