I want to forward the click event of a parent element to it's child input element. My problem is that if the click happens on both the parent element and the input then the click is triggered twice, in effect checking and immediately unchecking a checkbox for example. This it my HTML:
<div class="parent-element js-inputhit">
<input type="checkbox" name="somename" value="somevalue">
</div>
And this is my jQuery:
// Make input elements hit box include the parent container
$('.js-inputhit').click(function() {
$(this).find(':input').click();
});
$('.js-inputhit :input').click(function(e) {
e.stopPropagation();
});
How do I stop the click event from triggering if my click was actually on both elements?
I think I found an an answer to my question. I will mark it as answered, but If anyone thinks this is the wrong way to do this, please comment.
I used event.target to check if it's value is the .js-inputhit class, and if so run my code. This is what worked for me:
// Make input elements hit box include the parent container
$('.js-inputhit').click(function() {
if (this === event.target) {
$(this).find(':input').click();
}
});
$('.js-inputhit :input').click(function(e) {
e.stopPropagation();
});