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

Question

Below is a simple example of what i'm running into.

All I want to do is add an event handler for the function Foo to link1 so that when link1 is clicked it will run Foo.

But what is happening is that Foo actually runs onpageload and never onClick of link1.

What's going on?

 $(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

You need to pass a function reference as the click handler, you are invoking the function(By adding () at the end of function) so the function is executed first then the value returned by it( undefined in this case as the event handler.)

One solution here, since you want to pass a custom argument to the called function is to use a anonymous function as the event handler which will call foo with desired parameter

 $(document).ready(function() { $('#link1').on('click', function() { 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> 

---

Update if you don't want to pass any custom parameters to the target function foo then

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

 <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>