Triggering Click Event Inside My .click Callback Causes "maximum Call Stack Size Exceeded"

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

Solution 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.

Solution 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>

Solution 3:

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.

Solution 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');
   returnfalse;
});

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