I have an example card that has a button inside. When I click the card, a log will appear that the card is clicked, but when I click the button a log message appears that I clicked the card and the button.
It should only show the log message for the button when clicking on the button. Not the card.
How to handle this problem?
$('.cards-trigger').on('click', function(){
console.log('cards-trigger')
});
$('.button-trigger').on('click', function(){
console.log('button-trigger')
});
$('.cards').on('click', function(e){
e.stopPropagation();
$(this).siblings().trigger('click')
});
$('.add-button').on('click', function(e){
e.stopPropagation();
$(this).siblings().trigger('click')
});.cards{
padding:20px;
background-color:grey;
}
.hidden{
display:none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, molestias.</p>
<button class="add-button">Add</button>
<button class="hidden button-trigger">BT</button>
</div>
<button class="hidden cards-trigger">CT</button>By clicking button you're also click card. First thrown event for button, then for card (and so on traversing up to the body and html). If you don't want event to propaggate add event.stopPropagation() like:
$('#buttonAdd').on('click', function(e){
e.stopPropagation();
console.log('click the button')
})
notice, I've added event parameter (e) to your function.
Just add a return false at the end of your child function (#buttonAdd) to prevent event propagation.
Alternatively you could add a event.stopPropagation() to stop the event propagation.
See here: jQuery stopPropagation
$('.cards').on('click', function(){
console.log('click the card')
})
$('#buttonAdd').on('click', function(){
console.log('click the button')
return false
}).cards{
padding:20px;
background-color:grey;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eveniet.</p>
<button id="buttonAdd">Add</button>
</div>