为什么？

Question

var season = "10";

$( document ).ready(function() {
    $("#table").hide();
});

$('#searchButton').on("click", showTable(event));

function showTable(event){
    $("#table").show();
    document.getElementById("td").innerHTML = season;     
}

如何在页面加载时自动执行showTable（event）函数？另一个问题是，如果单击该按钮，则单击事件不起作用。我做错了什么？

Answer 1

如何在页面加载时自动执行showTable（event）函数？

因为您正在调用该函数：showTable(event)。函数引用后的()表示执行该函数。您正在呼叫showTable并将返回值（undefined）传递给.on()。

这是一个简化的例子：

function foo() {
  return 42;
}

function bar(x) {
  console.log(x);
}

bar(foo());

这会调用函数foo，并将其返回值（42）传递给bar，后者会记录该值。

如果我们改为编写bar(foo)，我们会传递函数本身，bar可以执行该函数。

我做错了什么？

您正在调用该功能。将其传递给.on，然后让浏览器调用它：

$('#searchButton').on("click", showTable);

Answer 2

该行：

$('#searchButton').on("click", showTable(event));

实际执行showTable(event)。你想要的是：

$('#searchButton').on("click", showTable);

为什么？

当你有$('#searchButton').on("click", showTable(event));时，发送给.on()的是showTable(event)函数执行的结果。

如果您使用$('#searchButton').on("click", showTable);，那么您作为.on()函数的第二个参数发送的内容现在是对showTable函数的引用，而不是其结果。

Answer 3

通过说showTable（event），您正在调用该函数。

您需要做的是：

$('#searchButton').on("click", function (event) {
  showTable(event)
});

为什么我的JavaScript会自动执行函数？

3 个答案:

为什么？