Почему мой JavaScript автоматически выполняет функции?

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 (событие) выполняется автоматически при загрузке страницы? Другая проблема заключается в том, что событие click не работает, если нажать кнопку. Что я сделал не так?

Answer 1

Как можно, что функция showTable (событие) автоматически выполняется при загрузке страницы?

Поскольку вы вызова функции: 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

Говоря showTable (event), вы вызываете функцию.

Что вам нужно сделать, это:

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

Answer 3

Линия:

$('#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, а не ее результат.