title: Checkbox inside an anchor click behavior
body: <p>Consider following snippet:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;form&gt;
              &lt;a id="a" href="http://google.com"&gt;Goooooogle&lt;/a&gt;
          &lt;/form&gt;
          &lt;script&gt;
              $(function() {
                  var checkbox = $('&lt;input type="checkbox"&gt;&lt;/input&gt;');
                  checkbox.prependTo($('#a'));
                  checkbox.click(function(e) {
                      e.stopPropagation();
                      // do something useful
                  });
              });
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I want to get a checkbox inside <code>&lt;a&gt;</code>, and get following on-click behavior:</p>
  
  <ol>
  <li>Toggle check mark normally as usual</li>
  <li>Do something useful like AJAX-request</li>
  <li>Stay on this page, i.e. not be redirected to an <code>a href</code></li>
  </ol>
  
  <p>Also I want to not override default behavior if I click anywhere in <code>a</code>, but not on checkbox. I.e. I want to allow to execute all event handlers associated with <code>a</code> click itself.</p>
  
  <p>I thought that should be pretty easy, but I can't get desired behavior. Either:</p>
  
  <ul>
  <li>I get redirected to Google if I put a code provided.</li>
  <li>I don't get check mark toggled if I use <code>e.preventDefault()</code> of <code>return false;</code>. Furthermore in that case checkbox ignores explicit <code>checkbox.attr('checked', 'checked')</code> and all other possible ways to set the check mark.</li>
  </ul>
  
  <p>Where is the catch?</p>
  
  <p><em>UPD:</em> This works as expected in Chrome, e.g. I'm not redirected on click, but fails in Firefox. Is there cross-browser way?</p>