title: jQuery event delegation with non-trivial HTML markup?
body: <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 noreferrer">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="https://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>