Question

我在脚本中执行了这个功能

$(document).ready(documentReady);

function documentReady(){
      console.log("Ready");
      $(".loadMore").on("click",loadMoreClicked(this.id));
}

function loadMoreClicked(elementID){
//do something with elementID
}

但是，每次文档加载时，它都会立即执行 loadMoreClicked函数 - 从而产生错误。

似乎如果我只是想在没有直接执行的情况下为click事件分配函数，我必须删除任何参数。为什么会这样，我怎么能避免呢？

Answer 1

只需删除括号和参数，this将在回调

中可用

$(".loadMore").on("click", loadMoreClicked);

function loadMoreClicked(){
    var elementID = this.id;
}

Answer 2

您需要使用匿名函数进行回调调用

$(".loadMore").on("click",function(){ loadMoreClicked(this.id) });

如果没有这个，在文档加载时会立即调用该函数，从而导致您正在观察的直接执行行为。它还会将函数的返回值（在这种情况下为undefined）分配给单击处理程序，这也是不合需要的。

Answer 3

$(document).ready(function(){
    $('.loadMore').click(function(event) {
        var self = $(this);
        var element = self.attr('id');

    });
});

Answer 4

另一种选择是将匿名函数设置为像这样的处理程序

function documentReady(){
      console.log("Ready");
      $(".loadMore").on("click",function(){
          var element = this.id;
      });
}

Answer 5

在.on（）之前委派.off（）以防止添加多个单击事件侦听器以防止内存泄漏是一个很好的做法。即

$(".loadMore").off("click").on("click", function(e) {
   e.preventDefault();
   loadMoreClicked(this.id);   
});

接下来，event.preventDefault()会阻止您的功能拦截任何默认操作。

{{1}}

希望这有帮助。

避免在Jquery中立即执行函数

5 个答案: