jQuery：太多的递归和最大调用堆栈大小

Question

我正在构建一个具有jQuery功能的应用程序，该功能可以翻转单个卡。 但是，在Firefox和Chrome中，我分别收到错误“ Too Much Recursion”和“最大调用堆栈大小超出”。

在有关此问题的其他文章中，我在调用中添加了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();
});

去掉它。 这没有任何意义。

演示

注意：在控制台上看到错误