¿Cómo puedo pasar argumentos a los manejadores de eventos en jQuery?

Question

Con el código jQuery como:

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

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

Cómo hacer yo pasar argumentos a myfunction durante el uso de jQuery?

Answer 1

La forma más sencilla es hacerlo al igual que (suponiendo que no desea que cualquiera de la información del evento pasado a la función) ...

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

jsFiddle.

Esto crea una función anónima, que se invoca cuando se desencadena el evento click. Esto a su vez llamará al myfunction() con los argumentos que proporcione.

Si desea mantener la ThisBinding (el valor de this cuando se invoca la función, ajuste para el elemento que desencadenó el evento), a continuación, llamar a la función con call().

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

jsFiddle.

No puede pasar la referencia directamente en la forma que indica su ejemplo, o su único argumento será el jQuery event object.

Si haces quieren pasar la referencia, debe aprovechar proxy() función de jQuery (que es un envoltorio de navegadores para Function.prototype.bind()). Esto le permite pasar argumentos, que están vinculados antes de el argumento event.

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

jsFiddle.

En este ejemplo, myfunction() serían ejecutados con su ThisBinding intacta (null no es un objeto, por lo que el valor normal this del elemento que provocó se utiliza el evento), junto con los argumentos (en orden) arg1, arg2 y finalmente el objeto jQuery event, que puede ignorar si no es necesario (ni siquiera lo asigne a los argumentos de la función).

También es posible usar usar el jQuery event objeto de data para pasar los datos, pero esto requeriría la modificación myfunction() para acceder a ella a través de event.data.arg1 (que no son argumentos de la función como su pregunta menciona), o al menos la introducción de un manual función proxy como el ejemplo anterior o una generada usando el último ejemplo.

Answer 2

si bien debería utilizar la respuesta de Alex, el método de "vinculación" de la biblioteca prototipo se ha estandarizado en Ecmascript 5, y pronto se implementará en los navegadores de forma nativa. Funciona así:

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

Answer 3

$("#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' 
}); 

también le permite enlazar y desvincular los controladores de eventos específicos utilizando el encendido y apagado métodos.

Ejemplo:

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

Esto sería desenlazar el manejador de mifuncion #myid

Answer 4

hilo viejo, pero para fines de búsqueda; Proveedores:

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

... y ver el parámetro "datos": http://api.jquery.com/on/

por ejemplo:

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

Answer 5

simple:

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

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