Triggering click event inside my .click callback c

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

My guess is the click events are being called recursively without an end. Do you have any callback function for the click event for open-modal <span> ? If so, please share it.

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>

Answer 3

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 4

Its due to event propagation from child element to parent element. When you click <span> (child element) it propogate event to parent <div>.

You have binded event when parent click it click on child. so in propofgation of click event goes in infinite loop so you have to stop propogation by e.preventDefault(); or return false; on end of click event function

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

$('[data-target="#popup-modal"]').click(function(e){
   $("#popup-modal").modal();
   return false;
});