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

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!

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

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

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

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

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

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

Essayez avec le code suivant:

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

  }
);