remplacer jquery.live () par jquery.on () ne fonctionne pas

Question

J'ai plusieurs zones de texte qui sont ajoutés dynamiquement après un appel ajax. Ces zones sont liées à des gestionnaires d'événements avec .live() qui fait actuellement les beaux travaux. Je veux remplacer qu'avec les versions plus récentes .sur la fonction ().

C'est ce que j'ai

$('.MyTextBox').live({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
});

Lorsque je remplace .live() avec .sur les() ne fonctionne pas; les zones de texte ne s'affichent pas leur comportement normal après ils sont ajoutés.

Si j'écris $('#MainDiv .MyTextBox').live({... , où MainDiv est le premier élément du DOM où toute l'action se passe, rien ne se passe non plus.

Ce qui me manque?

Merci

Answer 1

Voici l'exemple qu'ils ont, mais avec le délégué:

http://jsfiddle.net/HDtz3/

vs non-délégué: http://jsfiddle.net/HDtz3/1/

C'est pourquoi je déteste le nouveau sur la syntaxe.

Dans le vôtre, faites simplement:

 $('#MainDiv').on({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
}, '.MyTextBox');
 

et ça devrait marcher

Answer 2

tl;dr: Pour direct swap de remplacement (comptes pour le chargement dynamique), voir l' Exemple Général ci-dessous.

---

Comme d'autres affiches ont noté, la accepté de répondre à des œuvres, mais $(#MainDiv') des besoins doit être un "non-élément dynamique (pas en cours de chargement encore une fois grâce à l'ajax)". C'est préférable en terme de performance, comme la remontée d'événements "distance" est limitée. Dans l'exemple, il a seulement besoin de remonter jusqu'à celle du parent de l'élément à traiter.

La solution serait de se lier à la "mère-la plupart" des éléments qui ne va pas être rechargée via AJAX en général) - dans l'exemple, vous auriez besoin de lier $('#MainDiv')s'parent.

Cependant,

Si vous ne voulez direct swap en remplacement de live(), tout ce que vous devez faire est de lier à l' document élément à la place.

Exemple Général

Format 1:

//Replace:
$(selector).live(events, handler);           // Where `events` is a string

//With:
$(document)  .on(events, selector, handler); 

Format 2:

//Replace:
$(selector).live(events);                    // Where `events` is 
                                             //   an object of `handler`s
//With:                                      //   (as in OP's example)
$(document)  .on(events, selector);

A noter qu'avec l' on() exemples,selectors'conteneur(s) peut changer et la liaison sera automatiquement appliqué; les mêmes fonctionnalités que l' live().

OP Exemple:

//Deprecated live() version:
$('.MyTextBox').live({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
});

//New on() version
$(document).on({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
},'.MyTextBox');

Answer 3

Aaron, Matt, je pense que vous avez le sélecteur dans le mauvais ordre (pour un live de conversion), jetez un oeil à la documentation de l'API pour on- http://api.jquery.com/on/#example-7

$("body").on("click", "p", function(){
  //stuff
});

Quand j'ai essayé votre méthode (je suis venu ici à la recherche d'une solution pour la mise à jour de ma version de base), les erreurs de la console surgi pour tout (1.8, 1.9 et 2.0). L'élément cible devrait être le deuxième paramètre qui n'est pas le dernier. Je ne sais pas pourquoi votre réponse a été acceptée, car elle ne fonctionne pas. Espérons que cette aide.