2010-07-17 57 views
233

我想用jQuery的.click参数调用一个函数,但我无法让它工作。jQuery的.click - 传递参数给用户函数

这是我想要的工作:

$('.leadtoscore').click(add_event('shot'));

这就要求

function add_event(event) { 
    blah blah blah } 

,如果我不使用的参数,这样它的工作原理:

$('.leadtoscore').click(add_event); 
function add_event() { 
    blah blah blah } 

但我需要能够传递一个参数到我的add_event func灰。

我该怎么做这个特定的事情?

我知道我可以使用.click(function() { blah },但我从多个位置调用add_event函数,并希望这样做。

+0

这是从'patricks'回答采用的,我认为这是一个很好的解决方案:http://www.jsfiddle.net/naRRk/1/ – jAndy 2010-07-17 21:56:32

回答

419

对于彻底,我碰到另一种解决方案这是在的jQuery的click event handler.

1.4.3版中引入的功能,它可以让你通过数据映射到事件对象自动被反馈到部分前来jQuery的事件处理函数作为第一个参数。数据映射将作为第一个参数传递给.click()函数,接着是事件处理函数。

下面是一些代码来说明我的意思:

// say your selector and click handler looks something like this... 
$("some selector").click({param1: "Hello", param2: "World"}, cool_function); 

// in your function, just grab the event object and go crazy... 
function cool_function(event){ 
    alert(event.data.param1); 
    alert(event.data.param2); 
} 

我知道这是在游戏中后期的这个问题,但以前的答案使我这个解决方案,所以我希望它可以帮助别人的某个时候!

+11

这正是我想要的(当时)。从那时起我还没有在这个项目上工作过,但我认为我使用的是1.4.0。这绝对是最好的方式。 – 2012-02-27 16:30:37

+0

对我来说,我必须删除数据部分,例如警报(event.param1);我使用jQuery 1.10.2,也许他们已经改变了一些东西? – Family 2013-05-15 15:34:38

+0

@家庭 - 请问你在哪里找到jQuery v1.10.x?我似乎无法找到它的下载/任何相关的文档... – 2013-05-15 20:50:41

69

您需要使用像这样的匿名函数:

$('.leadtoscore').click(function() { 
    add_event('shot') 
}); 

你可以调用它就像你的例子有,只是一个函数名没有参数,就像这样:

$('.leadtoscore').click(add_event); 

add_event方法将不会得到'shot',因为它的参数,而不管click传递给它的回调,这是event对象本身......所以它不是ap在这种情况下可以应用,但适用于其他许多人。如果你需要传递参数,可以使用匿名函数...或者,有一个其他选项,使用.bind()和传递数据,这样的:在add_event

$('.leadtoscore').bind('click', { param: 'shot' }, add_event); 

和访问,就像这样:

function add_event(event) { 
    //event.data.param == "shot", use as needed 
} 
+0

当你说只是,这是否意味着只有?其次,这是否意味着我可以在我的add_event函数中使用$(this),就像我通常在匿名函数中那样? – 2010-07-17 21:36:14

+2

@phoffer - 是的,“just”表示没有参数,* only *函数名称,它是对函数的引用,而不是运行要分配给'click'处理程序的函数的结果。在上面的匿名方法和'.bind()'示例中,您可以使用'this',它会引用您点击的'.loadtoscore'(就像您期望的那样)。在最后一个例子中,'add_event(event)'内部也是如此,可以使用'this'或者'$(this)',它就是你想要的。 – 2010-07-17 21:41:42

+1

@phoffer:你必须显式地传递元素才能使用它,例如:'function(){add_event('shot',$(this));}'和'add_event(event,element){。 ..}'。 'element'在这里是一个jQuery元素(尽管正如Nick所说的那样,它可以和bind()一起工作)。 – 2010-07-17 21:41:58

29

如果你叫什么你有它的方式......

$('.leadtoscore').click(add_event('shot')); 

...你需要有add_event() RET瓮的功能,像...

function add_event(param) { 
    return function() { 
       // your code that does something with param 
       alert(param); 
      }; 
} 

返回并用作.click()参数的功能。

+3

+1,很好。工作示例http://www.jsfiddle.net/naRRk/ – jAndy 2010-07-17 21:47:50

+0

@jAndy - 感谢发布包含'event'参数的示例。我应该包括它。 :o) – user113716 2010-07-17 21:54:12

+0

http://www.jsfiddle.net/naRRk/1/只是把事情弄清楚 – jAndy 2010-07-17 21:54:43

5
 $imgReload.data('self', $self); 
      $imgReload.click(function (e) { 
       var $p = $(this).data('self'); 
       $p._reloadTable(); 
      }); 

组JavaScript对象的onclick元素:从 “本” 元素

$imgReload.data('self', $self); 

获取对象:

var $p = $(this).data('self'); 
+0

太棒了!可悲的是,当我尝试使用jQuery变量时,这是唯一有效的工具!不知道为什么。 :| – cregox 2015-02-15 01:51:08

6

是的,这是一个老帖子。无论如何,有人可能会觉得它有用。这是将参数发送给事件处理程序的另一种方法。

//click handler 
function add_event(event, paramA, paramB) 
{ 
    //do something with your parameters 
    alert(paramA ? 'paramA:' + paramA : '' + paramB ? ' paramB:' + paramB : ''); 
} 

//bind handler to click event 
$('.leadtoscore').click(add_event); 
... 
//once you've processed some data and know your parameters, trigger a click event. 
//In this case, we will send 'myfirst' and 'mysecond' as parameters 
$('.leadtoscore').trigger('click', {'myfirst', 'mysecond'}); 

//or use variables 
var a = 'first', 
    b = 'second'; 

$('.leadtoscore').trigger('click', {a, b}); 
$('.leadtoscore').trigger('click', {a}); 
17

我不得不使用。对像这样成功的():

event.data.event_type 

.on() documentation

$('.leadtoscore').on('click', {event_type: 'shot'}, add_event); 

然后add_event功能你会得到这样的访问 '出手' 内有关更多信息,请参阅以下示例:

function myHandler(event) { 
    alert(event.data.foo); 
} 
$("p").on("click", { foo: "bar" }, myHandler);