jQuery event delegation with non-trivial HTML markup?
<p>I have two DIVs, first one has a link in it that contains the id of the second DIV in its HREF attribute (<a href="http://jsbin.com/azimo/edit" rel="nofollow">complete setup on jsbin</a>). </p>

<p>I want to animate the second DIV when user clicks on the first - anywhere on the first. I also want to use event delegation because I'll have many such "DIV couples" on a page (and I'm using a JS snippet from this <a href="http://stackoverflow.com/questions/663842/jquery-unbinding-events-speed-increases/663886#663886">SO answer</a>). </p>

<p>If user clicks on the DIV itself, it will work - just check firebug console output. The problem is, if user clicks on one of the SPANs or the link itself, it doesn't work anymore.</p>

<p>How can I generalize the click handler to manage clicks on anything inside my DIV?</p>

<p>Here's the JS:</p>

<pre><code>$('#a').click(function(e) { 
    var n = $(e.target)[0]; 
    console.log(n); 

    if ( n &amp;&amp; (n.nodeName.toUpperCase() == 'DIV') ) { 
        var id = $(n).find('a').attr('hash'); 

        console.log(id); 
        $(id).slideToggle(); 
    } 
    return false; 
});
</code></pre>
