jQuery 的 .click - 将参数传递给用户函数

IT技术 javascript jquery function parameter-passing
2021-01-22 01:12:09

我正在尝试使用 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函数。

我该如何做这件事?

我知道我可以使用.click(function() { blah },但我add_event从多个地方调用该函数并希望以这种方式执行此操作。

6个回答

为彻底起见,我遇到了另一个解决方案,它是 jQuery单击事件处理程序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);
}

我知道这个问题已经迟到了,但是之前的答案让我找到了这个解决方案,所以我希望它在某个时候对某人有所帮助!

这比使用 HTML5 数据属性好多了,谢谢!(并解决了 JSHint 抱怨在回调中使用 'this' 的问题!)
2021-03-12 01:12:09
@totymedli - 我想你总是可以在其他地方调用它,传递一个相同结构的对象:var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);
2021-03-13 01:12:09
@Family - 哈哈没问题,即使通过评论也能提供帮助;)
2021-03-21 01:12:09
对我来说,我必须删除数据部分,例如 alert(event.param1); 我正在使用 jquery 1.10.2,也许他们已经改变了什么?
2021-04-06 01:12:09
我在服务器端动态创建对象并绑定点击事件: r.OnClientClick = "imageClicked({param1: '" + obj.Command + "' });return false"; 然后在客户端我有: function imageClicked(event) { if (event.param1 == "GOTO PREVIOUS") {...如果我使用 event.data.param1 它说它是未定义的。现在我已经在这里输入了,我可以看到不同之处,天啊!
2021-04-11 01:12:09

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

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

您可以像在示例中那样调用它,只是一个没有参数的函数名,如下所示:

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

但是该add_event方法不会得到'shot'它的参数,而是click传递给它的回调的任何东西,它是event对象本身......所以它在这种情况下不适用,但适用于许多其他情况。如果您需要传递参数,请使用匿名函数……或者,还有另一种选择,使用.bind()并传递数据,如下所示:

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

并在 中访问它add_event,如下所示:

function add_event(event) {
  //event.data.param == "shot", use as needed
}
@phoffer:您必须显式传递元素才能使用它,例如:function(){ add_event('shot', $(this));}function add_event(event, element){...}element在这里将是一个 jQuery 元素(bind()尽管尼克提到它可以使用)。
2021-03-16 01:12:09
当你说just时,是指只吗?其次,这是否意味着我可以像通常在匿名函数中那样在我的 add_event 函数中使用 $(this) ?
2021-03-24 01:12:09
@Felix - 他也可以$(this)在函数内部使用,例如:jsfiddle.net/tSu5t
2021-03-26 01:12:09
@phoffer - 是的,“只是”意味着没有参数,只有函数名称,它是对函数的引用,而不是运行要分配给click处理程序的函数的结果。在上面的匿名方法和.bind()示例中,您可以使用this,它将指代.loadtoscore您点击的(如您所料)。在最后一个例子中,里面add_event(event)也是如此,使用thisor$(this)它将是你想要的。
2021-04-02 01:12:09

如果你按照你的方式称呼它......

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

...您需要add_event()返回一个函数,例如...

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

该函数被返回并用作 的参数.click()

@jAndy - 感谢您发布包含event参数的示例我应该把它包括在内。:o)
2021-03-13 01:12:09

我像这样使用 .on() 取得了成功:

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

然后在add_event函数内部,您可以像这样访问“镜头”:

event.data.event_type

有关更多信息,请参阅.on() 文档,其中提供了以下示例:

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

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

//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});