Triggering click event inside my .click callback causes "Maximum call stack size exceeded"

Question

I couldn't get any possible reason as to why is this happening. I have a button which opens a bootstrap popup. But before opening the modal I need to alter some of my variables, So I am triggering a click event on hidden button which opens the bootstrap modal. HTML looks something like-

<div id="visible-button">
   <span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>
</div>

And the js code is something like-

$('#visible-button').click(function(){
   //perform data manipulation
   $('#open-modal').trigger('click');
});

But this produces

Uncaught RangeError: Maximum call stack size exceeded

If I edit the code to

$('#visible-button').click(function(){
   //perform data manipulation
   setTimeout(function(){
     $('#open-modal').trigger('click');
   }, 500);
});

The modal keeps opening and dissappearing for ever. What is exactly happening here? I have triggered click event in the past too but have never faced such a scenario. Thanks for the help in Advance.

Answer 1

As open-modal is wrapped inside visible-button, triggering a click on open-modal is equivalent to triggering a click on visible-button. So when you click on visible button, onclick event of visible-button gets triggered which intern clicks on visible-button again, and it gets into a infinite loop.

Answer 2

This will prevent the error. The reason for the error is you're clicking the same parent recursively. Having the button and the modal separately will fix the problem.

<div id="visible-button"></div>

<span class="hidden" id="open-modal" data-toggle="modal" data-target="#popup-modal"></span>