如何用jQuery将参数传递给事件处理程序?

With jQuery code like:

与jQuery代码:

$("#myid").click(myfunction);

function myfunction(arg1, arg2) {/* something */}

How do I pass arguments to myfunction while using jQuery?

如何在使用jQuery时将参数传递给myfunction ?

5 个解决方案

#1

The simplest way is to do it like so (assuming you don't want any of the event information passed to the function)...

最简单的方法是这样做(假设您不希望将任何事件信息传递给函数)……

$("#myid").click(function() {
    myfunction(arg1, arg2);
});

jsFiddle.

jsFiddle。

This create an anonymous function, which is called when the click event is triggered. This will in turn call myfunction() with the arguments you provide.

这将创建一个匿名函数，在单击事件被触发时调用该函数。这将使用您提供的参数调用myfunction()。

If you want to keep the ThisBinding (the value of this when the function is invoked, set to the element which triggered the event), then call the function with call().

如果您希望保留ThisBinding(在调用函数时的值，设置为触发事件的元素)，然后使用call()调用函数。

$("#myid").click(function() {
    myfunction.call(this, arg1, arg2);
});

jsFiddle.

jsFiddle。

You can't pass the reference directly in the way your example states, or its single argument will be the jQuery event object.

您不能以示例状态的方式直接传递引用，否则它的唯一参数将是jQuery事件对象。

If you do want to pass the reference, you must leverage jQuery's proxy() function (which is a cross browser wrapper for Function.prototype.bind()). This lets you pass arguments, which are bound before the event argument.

如果希望传递引用，则必须利用jQuery的proxy()函数(它是用于function .prototype.bind()的跨浏览器包装器)。这允许您传递参数，这些参数是在事件参数之前绑定的。

$("#myid").click($.proxy(myfunction, null, arg1, arg2));   

jsFiddle.

jsFiddle。

In this example, myfunction() would be executed with its ThisBinding intact (null is not an object, so the normal this value of the element which triggered the event is used), along with the arguments (in order) arg1, arg2 and finally the jQuery event object, which you can ignore if it's not required (don't even name it in the function's arguments).

在这个例子中,myfunction()将执行其ThisBinding完好无损(null不是一个对象,所以正常的这个值触发事件的元素使用),以及参数(为了)__arg1、最长最后jQuery事件对象,您可以忽略如果不需要(甚至没有名字的函数的参数)。

You could also use use the jQuery event object's data to pass data, but this would require modifying myfunction() to access it via event.data.arg1 (which aren't function arguments like your question mentions), or at least introducing a manual proxy function like the former example or a generated one using the latter example.

您还可以使用jQuery事件对象的数据来传递数据，但是这需要修改myfunction()来通过event.data访问它。arg1(它不是像您的问题提到的那样的函数参数)，或者至少引入了一个手动代理函数，比如前面的示例，或者使用后面的示例生成一个代理函数。

#2

$("#myid").on('click', {arg1: 'hello', arg2: 'bye'}, myfunction);

function myfunction(e) {

    var arg1 = e.data.arg1;
    var arg2 = e.data.arg2;

    alert(arg1);
    alert(arg2);

}

//call method directly:
myfunction({
    arg1: 'hello agian', 
    arg2: 'bye again'
});

Also allows you to bind and unbind specific event handlers using the on and off methods.

还允许使用on和off方法绑定和解绑定特定的事件处理程序。

Example:

例子:

$("#myid").off('click', myfunction);

This would unbind the myfunction handler from #myid

这将从#myid解绑定myfunction处理程序

#3

while you should certainly use Alex's answer, the prototype library's "bind" method has been standardized in Ecmascript 5, and will soon be implemented in browsers natively. It works like this:

虽然您应该使用Alex的答案，但是原型库的“bind”方法已经在Ecmascript 5中标准化了，并且很快将在浏览器中实现。是这样的:

jQuery("#myid").click(myfunction.bind(this, arg1, arg2));

#4

Old thread, but for search purposes; try:

旧线程，但为了搜索目的;试一试:

$(selector).on('mouseover',...);

... and check out the "data" parameter: http://api.jquery.com/on/

…查看“data”参数:http://api.jquery.com/on/

e.g.:

例如:

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", {name: "Karl"}, greet );
$( "button" ).on( "click", {name: "Addy"}, greet );

#5

Simple:

简单:

$(element).on("click", ["Jesikka"],  myHandler);

function myHandler(event){
   alert(event.data);     //passed in "event.data"
}