title: jQuery use child click/attribute in parent
body: <p>Why this does not work in IE/Chrome but works in FF/Opera?
  I want to make the div around anchor clickable, so that when you click div, it behaves the same as if you would click the anchor itself.</p>
  
  <pre><code>&lt;script src="jquery-1.3.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function bindOnClickPostBack() {
          $(".header a").each(function () { 
              var anchor = $(this);
              var clickEvent = anchor.attr('href');
              var header = anchor.parent();
              header.css('background-color', 'yellow');
              header.attr('onclick', clickEvent);
          });
          /*$(".header").live("click", function(){
              anchor = $(this).find('a');
              var clickEvent = anchor.attr('href');
              alert(clickEvent);
              $(this).css('background-color', 'yellow');
              //header.attr('onclick', clickEvent);
              //anchor.click();
          });*/
          return false;
      }
  
      $(document).ready(function() {
          bindOnClickPostBack();
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>body:</p>
  
  <pre><code>&lt;div style="background-color:red" class="header"&gt; &lt;a href="alert('hello1')"&gt;Shortcut1&lt;/a&gt;&lt;/div&gt;
  &lt;div style="background-color:red" class="header"&gt; &lt;a href="alert('hello2')"&gt;Shortcut2&lt;/a&gt;&lt;/div&gt;
  &lt;div style="background-color:red" class="header"&gt; &lt;a href="alert('hello3')"&gt;Shortcut3&lt;/a&gt;&lt;/div&gt;
  &lt;div style="background-color:red" class="header"&gt; &lt;a href="alert('hello4')"&gt;Shortcut4&lt;/a&gt;&lt;/div&gt;
  </code></pre>