jQuery：递归过多且超出最大调用堆栈大小

Question

我正在构建一个具有翻转单个卡片的 jQuery 函数的应用程序。但是，在 Firefox 和 Chrome 中，我不断收到错误“递归过多”和“超出最大调用堆栈大小”。

从其他有关此事的文章中，我在调用中添加了 stopImmediatePropagation()，但仍然收到错误...不像以前那么多，但仍然足以引起注意。

有一个应该翻转的基础“卡片”，然后是按钮和测试坐在上面，这不应该导致卡片翻转。下面的工作，但会导致 jQuery 冒泡的递归。

当前代码是：

  $(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();
  });

我应该怎么做才能防止这些错误发生？

干杯:)

Answer 1

以下代码块负责该错误，

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

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

删除它。这没有任何意义。

DEMO

注意：在控制台查看错误