JQuery delegation inside div> divs> a also :(

Question

HTML:

<div id="a"> <a id="a0" href="#"></a> <div id="b"><a id="b0" href="#"></a><div> <div> 

JQuery

 $('#a').delegate('a', 'click', function(){ //do stuff }); 

delegates # b0. Is there any smart way to choose ways to ignore #b?

NB /// links inside the div are added and disabled dynamically ///

tee

Answer 1

if you know that only direct descendants try

 $('#a').delegate('#a>a', 'click', function(){ alert('a') }); 

if you know you want to ignore children from b try

 $('#a').delegate('a:not(#b>a)', 'click', function(){ alert('a') }); 

EDIT: violin

Answer 2

This works as expected. Your delegate() call will set up an event handler for all children in #a that match the a selector.

If you are trying to set a handler for a specific item, then do it

 $('#a0').click(function(){ ... }); 

Also your html is pretty broken. Make sure that closing tags actually close.

Answer 3

The first field in the delegate method is the selector. At the moment, you select all the anchors. Use an identifier instead.

Answer 4

jQuery1.7 or higher

 $('#a').on('click', '#a0', function(event) { alert(event.target.id); });