Come posso passare argomenti ai gestori di eventi in jQuery?

Question

Con il codice jQuery come:

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

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

Come faccio a passare gli argomenti a myfunction durante l'utilizzo di jQuery?

Answer 1

Il modo più semplice è quello di farlo in questo modo (supponendo che non si vuole nessuna delle informazioni evento passato alla funzione) ...

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

jsFiddle.

Questo crea una funzione anonima, che viene chiamata quando viene attivato l'evento click. Questo a sua volta chiamerà myfunction() con gli argomenti che fornisci.

Se si desidera mantenere la ThisBinding (il valore del this quando la funzione viene richiamata, impostare l'elemento che ha generato l'evento), quindi chiamare la funzione con call().

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

jsFiddle.

Non è possibile passare il riferimento direttamente nel modo in cui si afferma l'esempio o il suo singolo argomento sarà jQuery event object.

Se fai voler passare il riferimento, è necessario sfruttare la funzione proxy() di jQuery (che è un wrapper cross browser per Function.prototype.bind()). Ciò consente di passare argomenti, che sono associati prima l'argomento event.

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

jsFiddle.

In questo esempio, myfunction() vengono eseguite con le sue ThisBinding intatta (null non è un oggetto, in modo che il normale this valore dell'elemento che ha attivato l'evento viene utilizzato), insieme con gli argomenti (in ordine) arg1, arg2 e infine l'oggetto jQuery event, che puoi ignorare se non è richiesto (non nominarlo nemmeno negli argomenti della funzione).

Si potrebbe anche usare usare jQuery event oggetto di data per passare i dati, ma ciò richiederebbe la modifica myfunction() di accedervi tramite event.data.arg1 (che non sono argomenti della funzione come la vostra domanda menziona), o almeno l'introduzione di un manuale funzione proxy come il precedente esempio o una generata usando l'ultimo esempio.

Answer 2

mentre si dovrebbe certamente usare la risposta di Alex, il metodo "bind" della libreria prototipo è stato standardizzato in Ecmascript 5 e presto sarà implementato nei browser in modo nativo. Funziona in questo modo:

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

consente inoltre di legare e Unbind gestori di eventi specifici utilizzando l'on e off metodi.

Esempio:

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

questo sarebbe separare il gestore myfunction da #myid

Answer 4

thread vecchio, ma per scopi di ricerca; provare:

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

... e controllare il parametro "dati": http://api.jquery.com/on/

esempio:

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

Answer 5

Semplice:

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

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