Méthode JQuery .on () avec plusieurs gestionnaires d'événements vers un sélecteur

139

Essayer de comprendre comment utiliser la méthode Jquery .on () avec un sélecteur spécifique auquel plusieurs événements sont associés. J'utilisais auparavant la méthode .live (), mais je ne sais pas trop comment accomplir le même exploit avec .on (). S'il vous plaît voir mon code ci-dessous:

$("table.planning_grid td").live({
  mouseenter:function(){
     $(this).parent("tr").find("a.delete").show();
  },
  mouseleave:function(){
     $(this).parent("tr").find("a.delete").hide();        
  },
  click:function(){
    //do something else.
  }
});

Je sais que je peux attribuer plusieurs événements en appelant:

 $("table.planning_grid td").on({
    mouseenter:function(){  //see above
    },
    mouseleave:function(){ //see above
    }
    click:function(){ //etc
    }
  });

Mais je pense que l'utilisation correcte de .on () serait comme ceci:

   $("table.planning_grid").on('mouseenter','td',function(){});

Y a-t-il un moyen d'accomplir cela? Ou quelle est la meilleure pratique ici? J'ai essayé le code ci-dessous, mais pas de dés.

$("table.planning_grid").on('td',{
   mouseenter: function(){ /* event1 */ }, 
   mouseleave: function(){ /* event2 */ },
   click: function(){  /* event3 */ }
 });

Merci d'avance!

— butangphp
source

252

C'est l'inverse . Vous devriez écrire:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");

— Frédéric Hamidi
source

1

Pourquoi pas le sélecteur $("table.planning_grid td")?

— Muers

11

@Muers, cela fonctionnerait également et le questionneur le reconnaît, mais pense également qu'il devrait lier l'événement au <table>lieu de chaque <td>élément individuel , ce qui est en effet la bonne voie à suivre.

— Frédéric Hamidi

37

Il y a une bonne raison d'utiliser le .on sur <table> et non sur <td> et c'est si vous ajoutez dynamiquement des <td> plus tard. $ ('table td'). on ... n'affectera que les <td> qui sont dans la table au moment où vous appelez cette fonction. $ ('table'). on (..., 'td', function ...) affectera tout <td> que vous ajouterez plus tard à cette table.

— Raanan

8

@Raanan, en effet, et en plus chaque gestionnaire d'événements que l'on enregistre a un coût, bien que minime. Lorsque vous avez affaire à des milliers de cellules, l'enregistrement d'un seul gestionnaire sur le gestionnaire au <table>lieu d'un seul par <td>élément devient obligatoire pour obtenir des performances utilisables.

— Frédéric Hamidi

1

D'accord. Il est très difficile de rechercher sur Google cette question car «sur» est un mot courant et la plupart des résultats étaient liés à .bindet .live. Bonne réponse, exactement ce que je cherchais: D @ Frédéric - Votre lien ne renvoie plus à un en-tête idsur la page de documentation jquery. Probablement le résultat d'une documentation mise à jour. Mais je n'ai pas pu trouver cette réponse sur cette page.

— nzifnab

186

De plus, si vous aviez plusieurs gestionnaires d'événements attachés au même sélecteur exécutant la même fonction, vous pouvez utiliser

$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});

— Pirijan
source

5

c'est ce que je cherchais

— RozzA

... puis obtenez le type d'événement déclenché avec e.type (après avoir ajouté l'événement en tant que paramètre, c'est-à-dire ... function (e) ...

— William T. Mallard

24

Si vous souhaitez utiliser la même fonction sur différents événements, le bloc de code suivant peut être utilisé

$('input').on('keyup blur focus', function () {
   //function block
})

— thakurdev
source

11

J'ai appris quelque chose de vraiment utile et fondamental d' ici .

le chaînage des fonctions est très utile dans ce cas qui fonctionne sur la plupart des fonctions jQuery, y compris sur la sortie de fonction.

Cela fonctionne car la sortie de la plupart des fonctions jQuery sont les ensembles d'objets d'entrée afin que vous puissiez les utiliser tout de suite et le rendre plus court et plus intelligent

function showPhotos() {
    $(this).find("span").slideToggle();
}

$(".photos")
    .on("mouseenter", "li", showPhotos)
    .on("mouseleave", "li", showPhotos);

— Iman
source

7

Et vous pouvez combiner les mêmes événements / fonctions de cette manière:

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    'click blur paste' : function() {
        // Handle click...
    }
}, "input");

— angelmedia
source

1

Essayez avec le code suivant:

$("textarea[id^='options_'],input[id^='options_']").on('keyup onmouseout keydown keypress blur change', 
  function() {

  }
);

— Yogesh
source