JQuery .sur() la méthode avec plusieurs gestionnaires d'événements pour un sélecteur

À essayer de comprendre comment utiliser le Jquery .sur() la méthode avec un sélecteur qui a de multiples événements associés. J'étais auparavant à l'aide de l' .live() la méthode, mais pas tout à fait sûr de la façon d'accomplir le même exploit avec .sur(). Veuillez 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 les multiples événements en appelant le:

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

Mais je crois que la bonne utilisation de l' .sur() afin de:

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

Est-il un moyen pour accomplir cette? 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!

InformationsquelleAutor butangphp | 2011-12-22

242

C'est dans l'autre sens. Vous devriez écrire:
```
$("table.planning_grid").on({
    mouseenter: function() {
        //Handle mouseenter...
    },
    mouseleave: function() {
        //Handle mouseleave...
    },
    click: function() {
        //Handle click...
    }
}, "td");
```
- Pourquoi n'est-ce pas le sélecteur $("table.planning_grid td") ?
- il serait également le travail et l'interlocuteur reconnaît donc, mais aussi estime qu'il doit lier l'événement sur le <table> à la place de chaque individu <td> élément, qui est en fait le droit chemin à parcourir.
- Merci beaucoup! C'est exactement ce que je cherchais.
- Awesomesauce. Merci beaucoup, cela m'a aidé énormément!
- Il y a une bonne raison pour utiliser le .sur le <table> et non pas sur les <td>, et il est si vous ajouter dynamiquement des <td>s plus tard. $('table td').sur... n'a d'impact que le <td> qui sont dans la table du moment où vous appelez cette fonction. $('table').sur(... ,'td',fonction...) aura un effet sur les <td> vous ajoutez à ce tableau plus tard.
- en effet, et en outre chaque gestionnaire d'événement à l'un des registres a un coût, mais petit. Lorsque vous faites affaire avec des milliers de cellules, l'enregistrement d'un seul conducteur, sur le <table> au lieu d'un gestionnaire par <td> élément devient obligatoire pour atteindre les performances utilisable.
- Cela a été un problème difficile à Google, mais j'ai enfin trouvé votre réponse. Même pas le jQuery docs a été clair sur ce point. Merci!!!!
- D'accord. Très difficile de google à cette question que " on " est un mot commun et la plupart des résultats étaient liés à .bind et .live. Bonne réponse, juste ce que je cherchais 😀 @Frédéric - Votre lien ne permet pas d'accéder à un en-tête id sur le jquery docs page plus. Probablement une mise à jour de la documentation. Mais je ne pouvais pas trouver cette réponse sur cette page.
- Vous travaillez autour de la perfection. +1
- vous êtes mon héros je vous remercie 🙂
- Bon travail à l'aide de la selector paramètre. Je suis maintenant en utilisant cette approche pour la plupart des Forme et des gestionnaires d'événements à l'aide du sélecteur de paramètre de paresseux attacher.
InformationsquelleAutor Frédéric Hamidi
167

Aussi, si vous aviez plusieurs gestionnaires d'événements associés à la même sélecteur de l'exécution de la même fonction, vous pouvez utiliser
```
$('table.planning_grid').on('mouseenter mouseleave', function() {
    //JS Code
});
```
- c'est ce que je cherchais
- pourquoi cela ne fonctionne pas avec blur et change???
- ...et puis obtenir le réel tiré type d'événement avec e.type (après l'ajout de l'événement en tant que paramètre, c'est à dire ...function(e)...
InformationsquelleAutor Pirijan
17

Si vous souhaitez utiliser la même fonction sur les différents événements le bloc de code suivant peut être utilisé
```
$('input').on('keyup blur focus', function () {
   //function block
})
```
InformationsquelleAutor thakurdev
9

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

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

Cela fonctionne parce que la production de la plupart des fonctions jQuery sont les objets d'entrée fixe de sorte que vous pouvez les utiliser tout de suite et de le rendre plus court et le plus intelligent
```
function showPhotos() {
    $(this).find("span").slideToggle();
}

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

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

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

InformationsquelleAutor angelmedia

Essayer avec le code suivant:

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

  }
);

InformationsquelleAutor Yogesh

Vous devez vous connecter pour publier un commentaire.