Uncaught RangeError: Maximum call stack size exceeded - jQuery Error

0
votes

I am working with jQuery, I am trying to add a click trigger inside the click function for a different link. Heres what I have:

$('.details .banner .banner_link').on("click", function(e){
            e.stopPropagation();
            e.preventDefault();

             $('a.banner_link').trigger("click");
        });

As you can see, I am using stopProp and PreventDef, but I am still getting:

Uncaught RangeError: Maximum call stack size exceeded

This is driving me crazy, Ive been stuck on this for a while any help please, or at least why this is happening?!

Background:

.banner_link and a.banner_link in the code above are two separate links on the same page. I took the html for the a.banner_link and added it (via js) onto the page to show the same link in a separate location.

I want to emulate the behavior of the original link in the newly created link(it causes a modal to pop up), therefore I am doing this with the trigger("click") function.

Note:

If I just run the trigger('click') outside the scope of the outer click function, it runs fine!

2
javascriptjquerygoogle-chromestack-overflow
Recursion. - VisioN
You'll need to disable your handler before triggering click. As it stands, your handler calls itself ad infinitum. - CollinD
You explicitly call "click" so click is re-called ad infinitum; its nothing to do with the default behaviour ... - Alex K.
Your code says, "Whenever a .banner_link element is clicked, click all a.banner_link elements." This seems like like pretty straightforward infinite recursion. Maybe your misunderstanding is rooted in the statement ".banner_link and a.banner_link ... are two separate links on the same page" -- the selector .banner_link applies to all elements with the class banner_link. Why do you think those wouldn't be included in the elements described by the selector a.banner_link? - apsillers
You have defined a click function for .banner_link which triggers a click event on .banner_link so its on an indefinite loop until it gets stopped by your browser. - ODelibalta

2 Answers

0
votes

Because the link has a click event bound to it, when you move the link and trigger the click, the click event will fire again, which in turn calls the click trigger for eternity.

Why do you need to manually trigger the click event? If your modal dialog display logic is in a function, just have the click event call that function. If its not in a separate function, it should be.

stopPropagation and preventDefault will stop the event propagating up the tree, and prevent the default action for the click event respectively, but calling trigger to 'click' the button again is outside the scope of those functions

0
votes

That's an infinite recursion since

$('a.banner_link').trigger("click");

will call the click handler again and so on. Since tese "clicks" are not real events, e.stopPropagation(); won't work (as the actual click already has been stopped from propagation).

You may use a state variable to stop that 

    $('.details .banner .banner_link').on("click", function(e){
        if ( $(this).clickstate )
            return:

        e.stopPropagation();
        e.preventDefault();

         $(this).clickstate = true;
         $('a.banner_link').trigger("click");
    });

a more intelligent way thus would be to change the selector:

    $('.details .banner a.banner_link').on("click", function(e){

          // do what needs to be done ...


    });

another approach would be to encapsulate the inner of the click handler of a.banner_link in to a function and call that:

  function aClick() {
     ...
  }

  $('.details .banner .banner_link').on("click", function(e){
        e.stopPropagation();
        e.preventDefault();

         aClick();
    });


   $('a.banner_link').on("click", function(e){
        aClick();
    });