Question

以下是我遇到的一个简单示例。

我想要做的就是将函数Foo的事件处理程序添加到link1，以便在单击link1时它将运行Foo。

但是发生的事情是，Foo实际上是在onpageload上运行，而不是onClick of link1。

发生了什么事？

$(document).ready(function(){
  $( '#link1' ).on( 'click', foo( 'hello' ) );
});

function foo( bar ){
  alert( bar );
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link1">hello</a>
<a href="#" id="link2">world</a>

Answer 1

您需要传递一个函数引用作为单击处理程序，您正在调用该函数（通过在函数末尾添加()），因此首先执行该函数，然后执行它返回的值（{{1在这种情况下作为事件处理程序。）

这里有一个解决方案，因为你想要将自定义参数传递给被调用函数，就是使用匿名函数作为事件处理程序，它将使用所需参数调用undefined

＆＃13;

foo

＆＃13;

$(document).ready(function() {
  $('#link1').on('click', function() {
    foo('hello')
  });
});

function foo(bar) {
  alert(bar);
}

＆＃13;

更新，如果您不想将任何自定义参数传递给目标函数foo，那么

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="link1">hello</a>
<a href="#" id="link2">world</a>

＆＃13;

$(document).ready(function() {
  $('#link1').on('click', foo);
});

function foo(event) {
  alert('foo called');
}

＆＃13;

为什么jQuery .on（'click'，foo）在页面加载时运行该函数而不是单击？

1 个答案: