我正在尝试为按钮分配一个函数,但由于某些原因,当页面加载时,即使我没有点击任何内容,该函数也会被执行:
$("#search-button").on("click", searchFunction());
function searchFunction(){...}
答案 0 :(得分:2)
您需要传递函数而不是函数的结果。
改变这个:
$("#search-button").on("click", searchFunction());
到此:
$("#search-button").on("click", searchFunction);
最后使用searchFunction()
和()
执行该函数,使您将函数的结果传递给事件处理程序。
传递它时,searchFunction
会按预期传递对函数的引用。
使用小提琴中的相关代码:
$("#search-button").on("click", searchFunction);
function searchFunction() {
$(".search-results").append("fefe");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="wrapper outer search-form">
<div class="middle">
<div class="inner">
<div class="row">
<div class="col-sm-3">
<span class="input-group-btn">
<a href="https://en.wikipedia.org/wiki/Special:Random">
<button class="btn btn-secondary" type="button">Random Article</button>
</a>
</span>
</div>
<div class="col-sm-3">
<div class="input-group">
<input type="text" class="form-control" id="search-string">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button" id="search-button">Search</button>
</span>
</div>
</div>
</div>
</div>
<div class="wrapper outer">
<div class="middle">
<div class="inner search-results">
</div>
</div>
</div>
</div>
答案 1 :(得分:2)
替换为
$("#search-button").on("click", searchFunction);
这会将该函数附加到on click事件,否则在页面加载时调用该函数并将返回值附加到事件
答案 2 :(得分:0)
以上两个答案都是正确的。 searchFunction()
执行该功能。你也可以
$("#search-button").on("click", function(){searchFunction()});
答案 3 :(得分:0)
当您使用searchFunction
致电()
时,浏览器加载时,它将被解释为执行功能的请求。
要将函数作为参数传递,您需要删除括号
无论如何,如果您对使用的方法感觉更舒服,可以将其放在另一个函数中。
注意 :只有使用$(buttonReference).on('click', function);
,您才可以选择使用点击的元素引用($(this))。
$('#btnWrong').on('click', print());
$('#btnRight1').on('click', print);
$('#btnRight2').on('click', function() { print(); });
function print(){
console.log('foo');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="btnWrong" value="no print"/>
<input type="button" id="btnRight1" value="print as parameter"/>
<input type="button" id="btnRight2" value="print execution"/>