javascript - 为什么这些 Javascript 不一样？

Question

$(document).ready(function() {
    $("button").on("click", TestFunction());
});

function TestFunction() {
    console.log("Function called");
    $b = $("#test");
    $b.remove();
}

对比

$(document).ready(function() {
    $("button").on("click", function() {
        $b = $("#test");
        $b.remove();          
    });
  });

第一个在页面加载后立即删除按钮#test。无需单击该按钮，只需将其删除即可。第二个按预期工作。该按钮会显示出来，并且在调用之前不会被删除。

我不理解 Javascript 语法/jQuery API 的哪一部分？我认为传递给 .on() 的处理程序参数是一个函数。我在第一个示例中向它传递了一个函数，它似乎已经调用了它，但它忽略了“点击”。

在调用函数之前，函数内部的任何内容是否都应该被忽略？

Answer 1

$("button").on 的第二个参数接受函数，并且不返回值> 函数(除非返回值的类型为function)。你在第二个版本中做得对，但在第一个版本中做得不对。因此，要解决第一个版本中的问题，您必须传入一个函数，如下所示:

$(document).ready(function() {
    $("button").on("click", TestFunction);
});