jQuery: Too Much Recursion and Maximum Call Stack Size Exceeded

Question

I'm building an app that has a jQuery function that flips individual cards. However, in Firefox and Chrome I keep getting the errors "Too Much Recursion" and "Maximum call stack size exceeded" respectively.

From other articles around the matter, I added stopImmediatePropagation() to the calls, but am still getting the errors... not as many as before, but still cripples things enough to notice.

There is a base "card" that should flip, followed by buttons and test sitting on top, that should not cause the card to flip. The below works but causes the recursion from jQuery's bubbling.

Current code is:

  $(document).on("click", ".card-container", function(e){
    e.stopImmediatePropagation();  
    $(this).flip();
  });
  $(document).on("click", ".btn", function(e){
    e.stopImmediatePropagation(); 
    $(this).click();
  });
  $(document).on("click", "p", function(e){
    $(this).click();
  });

What should I do to prevent these errors from occurring?

Cheers :)

Answer 1

The following code blocks are responsible for that error,

$(document).on("click", ".btn", function(e){
    e.stopImmediatePropagation(); 
    $(this).click();
});

$(document).on("click", "p", function(e){
    $(this).click();
});

Remove it. It does not make any sense.

DEMO

Note: see the error on the console