.Click de jQuery - passe les paramètres à la fonction utilisateur


283

J'essaie d'appeler une fonction avec des paramètres en utilisant le .click de jQuery, mais je ne peux pas le faire fonctionner.

Voici comment je veux que cela fonctionne:

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

qui appelle

function add_event(event) {
    blah blah blah }

Cela fonctionne si je n'utilise pas de paramètres, comme ceci:

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

Mais je dois pouvoir transmettre un paramètre à ma add_eventfonction.

Comment puis-je faire cette chose spécifique?

Je sais que je peux l'utiliser .click(function() { blah }, mais j'appelle la add_eventfonction à partir de plusieurs endroits et je veux le faire de cette façon.


ceci est adopté à partir de la patricksréponse, ce qui, je pense, est une excellente solution: jsfiddle.net/naRRk/1
jAndy

Réponses:


514

Par souci de rigueur, je suis tombé sur une autre solution qui faisait partie de la fonctionnalité introduite dans la version 1.4.3 du gestionnaire d'événements click jQuery .

Il vous permet de passer un mappage de données à l'objet événement qui est automatiquement renvoyé à la fonction de gestionnaire d'événements par jQuery comme premier paramètre. Le mappage de données serait remis à la .click()fonction en tant que premier paramètre, suivi de la fonction de gestionnaire d'événements.

Voici un code pour illustrer ce que je veux dire:

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

Je sais qu'il est tard dans le jeu pour cette question, mais les réponses précédentes m'ont conduit à cette solution, donc j'espère que cela aidera quelqu'un un jour!


11
C'est exactement ce que je voulais (à l'époque). Je n'ai pas travaillé sur ce projet depuis, mais je pense que j'utilisais 1.4.0. C'est certainement le meilleur moyen disponible.
Paul Hoffer

1
Je crée dynamiquement l'objet côté serveur et lie l'événement de clic avec: r.OnClientClick = "imageClicked ({param1: '" + obj.Command + "'}); return false"; Ensuite, côté client, j'ai: la fonction imageClicked (event) {if (event.param1 == "GOTO PREVIOUS") {... Si j'utilise event.data.param1, cela dit que ce n'est pas défini. Maintenant que je l'ai tapé ici, je peux voir la différence, d'oh!
Famille

1
@Family - Haaha pas de problème, c'est sympa d'aider, même à travers les commentaires;)
Chris Kempen

5
@totymedli - Je suppose que vous pouvez toujours appeler un autre endroit, le passage d' un objet de la même structure: var param_obj = {data : {param1: "Hello", param2: "World"}}; cool_function(param_obj);?
Chris Kempen

1
C'est tellement mieux que d'utiliser des attributs de données HTML5, merci! (Et résout JSHint se plaignant d'utiliser également 'ceci' dans le rappel!)
Matthew Herbst

77

Vous devez utiliser une fonction anonyme comme celle-ci:

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

Vous pouvez l'appeler comme vous l'avez dans l'exemple, juste un nom de fonction sans paramètres, comme ceci:

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

Mais la add_eventméthode n'obtiendra pas 'shot'comme son paramètre, mais plutôt tout ce qui clickpasse à son rappel, qui est l' eventobjet lui-même ... donc il n'est pas applicable dans ce cas , mais fonctionne pour beaucoup d'autres. Si vous devez passer des paramètres, utilisez une fonction anonyme ... ou, il y a une autre option, utilisez .bind()et passez des données, comme ceci:

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

Et accédez-y add_event, comme ceci:

function add_event(event) {
  //event.data.param == "shot", use as needed
}

Quand vous dites juste, cela signifie-t-il seulement? Deuxièmement, cela signifie-t-il que je serais en mesure d'utiliser $ (this) dans ma fonction add_event comme je le ferais normalement dans la fonction anonyme?
Paul Hoffer

2
@phoffer - Oui, "juste" signifie pas de paramètres, seulement le nom de la fonction, c'est une référence à la fonction, pas le résultat de l'exécution de la fonction que vous souhaitez affecter au clickgestionnaire. Dans la méthode anonyme et les .bind()exemples ci-dessus que vous pouvez utiliser this, cela se référera à celui .loadtoscoresur lequel vous avez cliqué (comme vous vous en doutez). Dans le dernier exemple, à add_event(event)l' intérieur de la même chose est vraie, utilisez thisou $(this)et ce sera ce que vous voulez.
Nick Craver

1
@phoffer: Vous devez passer explicitement l'élément pour l'utiliser, par exemple: function(){ add_event('shot', $(this));}et function add_event(event, element){...}. elementserait un élément jQuery ici (cela fonctionne bind()bien que comme Nick l'a mentionné).
Felix Kling

@Felix - Il peut également utiliser $(this)à l'intérieur de la fonction, par exemple: jsfiddle.net/tSu5t
Nick Craver

35

Si vous l'appelez comme vous l'avez fait ...

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

... vous devez avoir add_event()renvoyé une fonction, comme ...

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

La fonction est renvoyée et utilisée comme argument pour .click().


@jAndy - Merci d'avoir publié l'exemple incluant le eventparamètre. J'aurais dû l'inclure. : o)
user113716

27

J'ai réussi à utiliser .on () comme ceci:

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

Ensuite, à l'intérieur de la add_eventfonction, vous avez accès à «tirer» comme ceci:

event.data.event_type

Consultez la documentation .on () pour plus d'informations, où ils fournissent l'exemple suivant:

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

11

Oui, c'est un ancien poste. Quoi qu'il en soit, quelqu'un peut le trouver utile. Voici une autre façon d'envoyer des paramètres aux gestionnaires d'événements.

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

6
      $imgReload.data('self', $self);
            $imgReload.click(function (e) {
                var $p = $(this).data('self');
                $p._reloadTable();
            });

Définissez l'objet javaScript sur l'élément onclick:

 $imgReload.data('self', $self);

récupère l'objet depuis "this":

 var $p = $(this).data('self');

Impressionnant! Malheureusement, c'est la seule chose qui fonctionne lorsque j'essaie d'utiliser des variables jquery! aucune idée pourquoi. : |
cregox

3

J'obtiens la solution simple:

 <button id="btn1" onclick="sendData(20)">ClickMe</button>

<script>
   var id; // global variable
   function sendData(valueId){
     id = valueId;
   }
   $("#btn1").click(function(){
        alert(id);
     });
</script>

Ma moyenne est de passer l' onclickévénement value à l' javascript function sendData()initialisation de la variable et de le prendre par la méthode du gestionnaire d'événements jquery.

Ceci est possible car au début sendData(valueid)est appelé et initialise la valeur. Ensuite, après que l'événement jquery soit exécuté, utilisez cette valeur.

Il s'agit de la solution simple et de la solution Pour les détails, allez ici .


Je ne vois pas de moyen de passer des paramètres dynamiques ici, seulement des valeurs codées en dur.
user1451111

de cette façon, vous passez uniquement le valueId et perdez l'élément et les objets d'événement.
Zoltán Süle
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.