Checkbox inside an anchor click behavior
Solution 1
Well, it looks like a known Firefox bug, which leads to following link on checkbox click regardless of handlers' code. As a bit dirty workaround one can use:
var checkbox = $('<input type="checkbox"></input>');
checkbox.prependTo($('#a'));
checkbox.click(function(e) {
setTimeout(function() { checkbox.prop('checked', !checkbox.prop('checked')); }, 10);
// do something useful on clicking checkbox and but not surrounding link
return false;
});
Solution 2
I know this is an old question but some may still be curious since it was never really fully answered without a messy hack or workaround. All you have to do is simply check where the event's target originated.
So using your example (jsfiddle):
// Don't change pages if the user is just changing the checkbox
$("#a").click(function(e) {
//e.preventDefault(); // Optional if you want to to keep the link from working normally
alert("Click came from: " + e.target.tagName);
if (e.target.tagName != "INPUT") {
// do link
alert("Doing link functionality");
} else {
// do something useful
alert("Doing checkbox functionality");
}
});
Solution 3
I Know this question is over 5 years old, but I had the same issue recently and the work-around I found was to add an onclick function to the checkbox and in that function call event.stopImmediatePropagation().
from w3schools: "The stopImmediatePropagation() method prevents other listeners of the same event from being called"
ie...the anchor.
function checkbox_onclick(event){
event.stopImmediatePropagation();
}
nkrkv
JS’er, Python’er, Vimer. CTO here and there. An entrepreneur who like to work with geeks.
Updated on June 06, 2022Comments
-
nkrkv about 2 years
Consider following snippet:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> </head> <body> <form> <a id="a" href="http://google.com">Goooooogle</a> </form> <script> $(function() { var checkbox = $('<input type="checkbox"></input>'); checkbox.prependTo($('#a')); checkbox.click(function(e) { e.stopPropagation(); // do something useful }); }); </script> </body> </html>
I want to get a checkbox inside
<a>
, and get following on-click behavior:- Toggle check mark normally as usual
- Do something useful like AJAX-request
- Stay on this page, i.e. not be redirected to an
a href
Also I want to not override default behavior if I click anywhere in
a
, but not on checkbox. I.e. I want to allow to execute all event handlers associated witha
click itself.I thought that should be pretty easy, but I can't get desired behavior. Either:
- I get redirected to Google if I put a code provided.
- I don't get check mark toggled if I use
e.preventDefault()
ofreturn false;
. Furthermore in that case checkbox ignores explicitcheckbox.attr('checked', 'checked')
and all other possible ways to set the check mark.
Where is the catch?
UPD: This works as expected in Chrome, e.g. I'm not redirected on click, but fails in Firefox. Is there cross-browser way?