web-dev-qa-db-fra.com

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

Essayez 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 savais 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 crois que le bon usage de .on () serait comme suit:

   $("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!

javascriptjqueryjquery-selectorsjquery-1.7
127
butangphp

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

$("table.planning_grid").on({
    mouseenter: function() {
        // Handle mouseenter...
    },
    mouseleave: function() {
        // Handle mouseleave...
    },
    click: function() {
        // Handle click...
    }
}, "td");
245
Frédéric Hamidi

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

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

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

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

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

Les fonctions de chaînage sont très utiles dans ce cas, qui fonctionne avec la plupart des fonctions jQuery, y compris sur sortie de fonction aussi.

Cela fonctionne car la sortie de la plupart des fonctions jQuery sont des ensembles d’objets d’entrée, ce qui vous permet de les utiliser immédiatement et de les rendre plus rapides et plus intelligentes.

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

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

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");
7
angelmedia

Essayez avec le code suivant:

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

  }
);
1
Yogesh