jQuery how to stop triggered click event from bubbling

Question

I had this code:

$('.panel-select').click(function() {
  $(this).children('input').trigger('click');
});

But I got a RangeError: Maximum call stack size exceeded. I googled some and found out that the event bubbles up in the DOM.

I'm trying to stop it but I'm not succeeding. I tried this:

$('.panel-select').click(function(e) {
  e.stopPropagation();
  $(this).children('input').trigger('click');
});

But it's not working. How should I do this?

Answer 1

You need to have a bound event to the child elements:

$('.panel-select').click(function() {
   $(this).children('input').trigger('click');
});

// try adding to the below event not on the parent.

$('.panel-select input').click(function(e) {
    e.stopPropagation();
});