JQuery绑定click事件函数传参问题

最近用JQuery库遇到一个问题:

在给一个button绑定click函数的时候

1. 如果该函数不传递参数,那么可以正常使用

2. 如果该函数接收参数,该函数的响应时间变得非常奇怪

 

Example:

情况1

我有一个按钮,id为 btn_1,绑定的函数为

[code lang=”js”]
function cool_function()
{
alert("BALA BALA");
}
[/code]

绑定的方式为:

[code lang=”js”]
$("#btn_1").click(cool_function);
[/code]

这个时候,当我点击该按钮,可以弹出提示“BALA BALA”

 

情况2

当我需要传递一个参数给cool_function的时候,问题来了

[code lang=”js”]
function cool_function(val) // 接收一个参数
{
alert(val);
}

$("#btn_1").click(cool_function(12345)); // 传递12345进去
[/code]

按预想,应该是单击按钮的时候,弹出提示“12345”,但现在是只要我一进入页面,则自动弹出“12345”提示,而不是等我点击按钮以后提示。

 

解决方案

该问题是由于JQuery默认只要函数名后面跟了括号则触发的机制造成的。可以采取回调函数的方法来解决。示例代码如下:

[code lang=”js”]
function cool_function(event)
{
alert(event.data.para1);
alert(event.data.para2);
}

$("#btn_1").click({para1:"hello", para2:"world"}, cool_function);
[/code]

就ok了。在函数中通过event的data中的相应参数名即可获取你想要的 以及 everything.

 

Hope help, Have Fun 🙂

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.