stopPropagation() and anchor?

Question

I have this html snippet:

<a href="picture-big.jpg">
  <span>
    <img src="picture-small.jpg">
    <input type="checkbox" name="delete">
  </san>
</a>

And the JS part:

$('input').click(function(e) {
  e.stopPropagation();
}); 

On Mozilla, when I'm clicking on checkbox, it's stops propagation, but still goes to that anchor (picture-big.jpg).

If I use return false or e.preventDefault() (and checking checkbox with jQuery ($('input').prop('checked', true);) it does not check input.

Idea is to check checkbox without following link. On Chrome and IE it's working. But not on Mozilla.

Any ideas?

Answer 1

I'd suggest restructuring your markup, if that's not possible, the following would work:

$('input').click(function(e) {
    e.preventDefault();
    var that = this;    
    setTimeout(function() { that.checked = !that.checked; }, 1);    
}); 

Fiddle