if 语句中的函数执行多次

Question

我有一个容器元素被多次加载，以通过 Ajax 请求在单击事件上显示可变内容，并且在 ajax Complete 时，我调用了一些函数，包括 if 语句中的函数 (A)。

我的问题是当函数 (A) 最终被调用时，它会被多次调用，具体取决于在 if 语句为真之前容器被加载了多少次。

这是我的代码的简单版本：

$(".button").on("click", function(){
  loadContainer();
});

var loadContainer = function(){
  $(".container").load(url, function(){
    var x = $(".x");
    if(x.length>0){
      A();
    };
  });
};

x 是一个元素$(".x")，它将被加载到容器中，并且只有在加载该元素时才应该调用函数 (A)。即$(".x").length>0

如果 (x.length>0) 在容器加载 3 次后为真，则函数 (A) 将被调用 3 次。

有没有办法解决这个问题或确保函数 (A) 只被调用一次？？

编辑： 我的完整代码：

    ajaxBtn.on("click", function(e) {

        loadContainer(url, curtain, mainContainer, body, links);
   });
var loadContainer = function(url, curtain, maincontainer, body, links) {

        $(".main-container").load(url + " .main-container  > *", function() {
            $("#logo").css({
                "z-index": "400"
            });

            mainFun();
            curtain.removeClass("full");
            links.removeClass("here");
            body.removeClass("no-scroll");
            clearInterval(timer);
            getFlexIndex();
            position = 0;

            if (vidContainer.length > 0) {
                youTubeLazyLoad();
            }
        });
};

请假设所有变量都已定义。

Answer 1

听起来您多次添加相同的按钮点击监听器

您应该研究这是如何发生的，因为没有足够的证据让我们知道原因。它是否嵌入在另一个事件处理程序中？还是在一个被多次调用的函数中？

一种解决方法是在添加新点击侦听器之前删除点击侦听器

改变

$(".button").on("click"... 

到

$(".button").off('click').on("click"...