Click specific element inside card

Question

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;
}



  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, molestias.

user_1530446 · Answer

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.

user_6795324 · Answer

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;
}



  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, eveniet.

Click specific element inside card

2 Answers