Tengo una tarjeta de ejemplo que tiene un botón adentro. Cuando hago clic en la tarjeta, aparecerá un registro de que se hizo clic en la tarjeta, pero cuando hago clic en el botón, aparece un mensaje de registro que indica que hice clic en la tarjeta y en el botón.
Solo debe mostrar el mensaje de registro para el botón al hacer clic en el botón. No la tarjeta.
¿Cómo manejar este problema?
$('.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>Al hacer clic en el botón, también estás haciendo clic en la tarjeta. Primer evento lanzado para el botón, luego para la tarjeta (y así sucesivamente hasta el cuerpo y el html). Si no desea que el evento se propague, agregue event.stopPropagation() como:
$('#buttonAdd').on('click', function(e){ e.stopPropagation(); console.log('click the button') })aviso, he agregado el parámetro de evento (e) a su función.
Simplemente agregue un return false al final de su función secundaria (#buttonAdd) para evitar la propagación de eventos.
Alternativamente, podría agregar un event.stopPropagation() para detener la propagación del evento. Ver aquí: 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>