未捕获的 RangeError：超出最大调用堆栈大小 - jQuery 错误

Question

我正在使用 jQuery，我正在尝试在 click 函数中为不同的链接添加一个点击触发器。这是我所拥有的：

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

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

如您所见，我正在使用 stopProp 和 PreventDef，但我仍然得到：

Uncaught RangeError: Maximum call stack size exceeded

这快把我逼疯了，我已经被困了一段时间了，请大家帮忙，或者至少为什么会这样？！

背景：

上面代码中的.banner_link 和a.banner_link 是同一页面上的两个独立链接。我获取了 a.banner_link 的 html 并将其（通过 js）添加到页面上，以在单独的位置显示相同的链接。

我想在新创建的链接中模拟原始链接的行为（它会导致弹出模式），因此我使用 trigger("click") 函数来执行此操作。

注意：

如果我只是在外部点击函数范围之外运行触发器（'click'），它运行良好！

Answer 1

由于链接绑定了点击事件，所以当你移动链接触发点击时，点击事件会再次触发，进而调用点击触发器永恒。

为什么需要手动触发点击事件？如果您的模态对话框显示逻辑在一个函数中，只需让点击事件调用该函数。如果它不在一个单独的函数中，它应该是。

stopPropagation 和 preventDefault 将停止事件向上传播，并分别阻止 click 事件的默认操作，但调用 trigger 再次“点击”按钮超出了这些功能的范围

Answer 2

这是一个无限递归，因为

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

将再次调用点击处理程序，依此类推。 由于这些“点击”不是真实事件，e.stopPropagation(); 将不起作用（因为实际点击已经停止传播）。

你可以使用状态变量来阻止它

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

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

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

因此，更智能的方法是更改​​选择器：

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

          // do what needs to be done ...


    });

另一种方法是将a.banner_link 的点击处理程序的内部封装到一个函数中并调用它：

  function aClick() {
     ...
  }

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

         aClick();
    });


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