StopPropagation () and binding?

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 part of JS:

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

In Mozilla, when I click on the checkbox, it stops the distribution, but still goes to this anchor (picture-big.jpg).

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

The idea is to check the box without a link. In Chrome and IE, it works. But not on Mozilla.

Any ideas?

Answer 1

I would suggest restructuring your markup, if this is not possible, the following will work:

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

Fiddle

Answer 2

stopPropagation() simply stops the event from bubbles in the dom tree, which means that parents are not notified about this, but this does not stop the default action. You must add e.preventDefault() to your code to stop it from navigating.

Answer 3

This is a known Firefox bug. Firstly, for a long time I tried to solve this JavaScript path until I realized what the obvious approach should be:

I could let the html structure be changed much easier. I had an anchored flag in the anchor. Since the anchor was absolute, located inside the relative div, it worked instantly.

 <input type="checkbox" name="delete"> <a href="picture-big.jpg"> </a> 

Answer 4

An old question, but if someone needs an answer. Therefore, if you cannot change the external anchor tag, you can wrap the checkbox yourself, for example:

 <a href="javascript:void(0);"> <input type="checkbox"> </a>