Comment puis-je transmettre des arguments aux gestionnaires d'événements dans jQuery?

Question

Avec un code jQuery comme:

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

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

Comment passer des arguments à myfunction tout en utilisant jQuery?

Answer 1

Le plus simple est de faire comme si (en supposant que vous ne voulez pas de l'information de l'événement passé à la fonction)...

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

jsFiddle.

Cela créer une fonction anonyme, qui est appelée lorsque l' click événement est déclenché. Ce sera à son tour appel myfunction() avec les arguments que vous fournissez.

Si vous voulez garder l' ThisBinding (la valeur de this lorsque la fonction est appelée, fixé à l'élément qui a déclenché l'événement), puis d'appeler la fonction avec call().

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

jsFiddle.

Vous ne pouvez pas passer la référence directement dans la façon dont vos états d'exemple, ou son seul argument sera le jQuery event objet.

Si vous ne voulez passer la référence, vous devez tirer parti de jQuery proxy() de la fonction (qui est un navigateur croix wrapper pour Function.prototype.bind()). Cela vous permet de passer des arguments, qui sont liés avant l' event argument.

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

jsFiddle.

Dans cet exemple, myfunction() seraient exécutés avec ses ThisBinding intact (null n'est pas un objet, de sorte que la normale this de la valeur de l'élément qui a déclenché l'événement est utilisé), avec les arguments (dans l'ordre) arg1, arg2 et enfin le jQuery event objet, vous pouvez l'ignorer si il n'est pas nécessaire (ne pas le même nom dans les arguments de la fonction).

Vous pouvez également utiliser le jQuery event de l'objet data , pour transmettre les données, mais cela nécessiterait une modification de myfunction() accéder via event.data.arg1 (qui ne sont pas des arguments de la fonction , comme votre question mentionne), ou, au moins, l'introduction d'un proxy manuel de la fonction comme l'ancien exemple ou un générés à l'aide de la dernier exemple.

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

Vous permet également de lier et de dissocier des gestionnaires d’événements spécifiques à l’aide des méthodes on et off.

Exemple:

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

Cela détacherait le gestionnaire myfunction de #myid

Answer 3

Bien que vous deviez certainement utiliser la réponse d'Alex, la méthode "bind" de la bibliothèque prototype a été normalisée dans Ecmascript 5 et sera bientôt implémentée dans les navigateurs de manière native. Cela fonctionne comme ceci:

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