jQuery .live() vs .sur() méthode pour ajouter un événement de clic après le chargement dynamique de code html

Je suis à l'aide de jQuery v. 1.7.De 1 où la .live() la méthode est apparemment obsolète.

Le problème que j'ai est que lorsque le chargement dynamique de code html sur un élément à l'aide de:

$('#parent').load("http://...");

Si j'essaie d'ajouter un événement click ensuite, il ne doit pas s'inscrire à l'événement en utilisant une de ces méthodes:

$('#parent').click(function() ...);

ou

//according to documentation this should be used instead of .live()
$('#child').on('click', function() ...);

Quelle est la bonne façon d'obtenir cette fonctionnalité? Il semble que pour travailler avec .live() pour moi, mais je ne devrais pas être à l'aide de cette méthode. Notez que #enfant est chargé dynamiquement élément.

Grâce.

  • Pourquoi dites-vous "soi-disant obsolète"? Ne croyez-vous pas les docs?
  • Ce n'est pas soi-disant obsolète: il est obsolète. Si vous regardez le jQuery doco pour .live() il vous indique la façon de réécrire les utilisations existantes de .live() à utiliser .delegate() ou .on() (selon que vous êtes sur la version 1.7+ ou pas). Notez cependant que si vous ajoutez un gestionnaire avec .click() "après", comme vous le mentionnez, c'est à dire, après le chargement dynamique des éléments, il devrait fonctionner - le seul problème est d'essayer d'attribuer avec .click() avant de les charger dynamiquement des éléments.
  • J'ai changé le texte "apparemment", car c'est en gros ce que je voulais dire. De toute façon, je comprends maintenant que, évidemment, depuis le .load() de l'événement est asynchrone, puis le n ° de l'élément enfant ne pourrait sûrement être reconnu dans le gestionnaire de succès, qui a du sens.
  • Double Possible de liaison d'Événements sur créer dynamiquement des éléments?
InformationsquelleAutor Sean Thoman | 2012-01-06
  1. 585

    Si vous voulez que le gestionnaire de clic de travailler pour un élément qui est chargé dynamiquement, vous pouvez alors définir le gestionnaire d'événement sur un objet parent (ce qui ne veut pas se charger dynamiquement) et lui donner un sélecteur qui correspond à votre dynamique d'un objet comme ça:

    $('#parent').on("click", "#child", function() {});

    Le gestionnaire d'événement sera joint à la #parent objet et chaque fois qu'un événement de clic les bulles jusqu'à ce que provenait d' #child, il va mettre le feu à votre gestionnaire de clic. Ceci est appelé délégué la gestion des événements (la gestion des événements est déléguée à un objet parent).

    C'est fait de cette façon parce que vous pouvez joindre à l'événement pour la #parent objet, même lorsque le #child objet n'existe pas encore, mais plus tard, quand il existe, et obtient cliqué sur, l'événement click de la bulle jusqu'à la #parent objet, il va voir qu'il est apparu sur #child et il y a un gestionnaire d'événement pour un clic sur #child et le feu de votre événement.

    • Grand explication! J'ai jamais été capable d'envelopper ma tête autour de live() vs on() mais ce soir j'ai décidé encore une fois d'essayer, et votre explication immédiatement révélé ce que j'avais été absent tout au long. Merci!
    • Un million d'ups. J'ai commencé à utiliser knock-out avant que je ne réalise ce qui a été possible en jQuery pour créer dynamiquement des enfants, je vous remercie beaucoup.
    • Vous devriez écrire un livre ou quelque chose: votre petit texte a été plus utile pour moi que la pleine page dans le jQuery docs sur «on()». Merci beaucoup!
    • ne vous arrive de savoir comment nous pouvons appliquer la même procédure pour un vol stationnaire, non-stationnaire de la situation? est-il une source qui en parle?
    • Voir cette réponse. Vous pouvez vous inscrire pour le mouseenter et mouseleave événements et de test à l'intérieur du gestionnaire de celui qui a été déclenché. jQuery pseudo "hover" événement n'est pas disponible avec la délégation.
    InformationsquelleAutor jfriend00
  2. 32

    Essayez ceci:

    $('#parent').on('click', '#child', function() {
    //Code
});

    De la $.sur() documentation:

    Les gestionnaires d'événements sont liés uniquement pour les éléments sélectionnés; ils
    doit exister sur la page au moment de votre code fait l'appel .on().

    Votre #child élément n'existe pas lorsque vous appelez $.on() sur elle, de sorte que l'événement n'est pas lié (contrairement à $.live()). #parent, cependant, ne existent, de sorte que la liaison de l'événement, c'est très bien.

    Le deuxième argument dans mon code ci-dessus, agit comme un "filtre" pour les ne se déclenchera que si l'événement bouillonnait à #parent de #child.

    • Si j'appelle l' $.sur() la méthode après l' $.la méthode load (), alors pourquoi ne pas le #élément enfant existent à ce point?
    • vous avez de l'appeler à partir du gestionnaire de succès de la .load() méthode n'est pas le code après le .load() méthode. #child est connu pour être chargé lorsque le gestionnaire de succès s'exécute en fait, et pas avant.
    • et même alors, le temps qu'il faut pour insérer toutes les données, vous avez de nouveau dans les DOM signifie qu'il pourrait ne pas se connecter. J'ai fait beaucoup de single page app de travail ces derniers temps et mon niveau est var $body = $('body'); $corps.sur("event", ".élément/#class", function(e){}); pour tout. 1 sélecteur. Ne vous inquiétez pas à propos de ce qui est ou n'est pas chargée.
    InformationsquelleAutor Bojangles
  3. 20

    $(document).on('click', '#selector', function() { /* do stuff */});

    EDIT: je suis en fournissant des informations un peu plus sur la façon dont cela fonctionne, parce que... les mots.
    Avec cet exemple, vous placez un listener sur l'ensemble du document.

    Lorsque vous click sur n'importe quel élément(s) correspondant à #selector, l'événement bulles pour le document principal-tant qu'il n'y a pas d'autres auditeurs qui appellent event.stopPropagation() méthode, ce qui prendrait le dessus le bouillonnement de un événement aux éléments parents.

    Au lieu de se lier à un élément spécifique ou un ensemble d'éléments, vous êtes à l'écoute de tous les événements à venir à partir d'éléments qui correspondent au sélecteur de spécifié. Cela signifie que vous pouvez en créer un à l'écoute, un temps, qui correspondra automatiquement actuellement des éléments déjà existants, ainsi que de toute manière dynamique des éléments ajoutés.

    C'est pratique pour plusieurs raisons, y compris la performance et l'utilisation de la mémoire (dans les applications à grande échelle)

    • Il a essayé .sur() et dit que sa ne fonctionne pas...
    • Il a essayé $(element).on(...). C'est $(document).on(...,element,...). Différentes bêtes.
    • est-il une incidence sur les performances de faire cela?
    • oui, de meilleures performances. vous n'aurez pas un auditeur sur plusieurs enfants, ne pas avoir à réappliquer l'auditeur tout moment le DOM est modifié, et les événements de la bulle à travers le DOM par défaut. Exécuter une seule fois et à chaque enfant correspondant au sélecteur de déclencher la fonction donnée lorsque l'utilisateur clique dessus.
    InformationsquelleAutor L422Y
  4. 11

    L'équivalent de .live() en 1.7 ressemble à ceci:

    $(document).on('click', '#child', function() ...);

    Fondamentalement, regarder le document cliquez sur les événements et de les filtrer pour #enfant.

    • Pourquoi $(document)?
    • Parce que c'est la façon dont le gestionnaire d'événement attache à ce que le document (de la même façon .live() n').
    • L'une des raisons qui .live() est obsolète maintenant, c'est parce que c'est mauvais pour les mettre tous en direct des gestionnaires d'événement de l'objet document. Les choses peuvent vraiment, vraiment ralentir. Non seulement les événements ont à faire des bulles tout le chemin jusqu'à le document, mais vous pouvez avoir beaucoup de gestionnaires d'événements à regarder à travers sur l'objet document. LE principal avantage de .on() est que vous pouvez attacher à un objet parent, qui est beaucoup plus proche de l'objet réel et d'améliorer considérablement les performances. Alors ... je vous déconseille d'utiliser .on() avec l'objet document. Beaucoup mieux de choisir un plus proche parent de l'objet.
    • Merci pour la clarification. Pour ce que ça vaut la performance des événements a été beaucoup améliorée avec le (), donc ça devrait être moins importante qu'elle ne l'habitude d'être. Si l'attacher à un parent, je suppose qu'il devrait être un parent qui existe sur le document prêt ou si vous voulez voir des problèmes similaires.
    • Au pire, ce t émuler le obsolète .live() approche; toutefois, la capacité de contrôle de la délégation est certainement un avantage.
    InformationsquelleAutor Jared
  5. 9

    Je sais que c'est un peu tard pour une réponse, mais j'ai créé un polyfill pour la .live() la méthode. Je l'ai testé dans jQuery 1.11, et il semble fonctionner assez bien. Je sais que nous sommes censés mettre en œuvre l' .sur() la méthode dans la mesure du possible, mais dans de grands projets, où il n'est pas possible de convertir toutes les .live() appelle à l'équivalent .sur() appelle pour quelque raison que ce soit, les éléments suivants pourraient travailler:

    if(jQuery && !jQuery.fn.live) {
    jQuery.fn.live = function(evt, func) {
        $('body').on(evt, this.selector, func);
    }
}

    Simplement l'inclure après chargement de jQuery et avant d'appeler live().

    InformationsquelleAutor NSV
  6. 5

    .sur() est pour la version jQuery 1,7 et au-dessus. Si vous avez une ancienne version, utilisez ceci:

    $("#SomeId").live("click",function(){
    //do stuff;
});
    • OP dit: "je suis à l'aide de jQuery v. 1.7.1 "
    • Alls je peux vraiment vous dire, c'est qu'il n'est pas pris en charge ci-dessous. J'ai eu de la malchance avec le() de mon auto et est revenue vivre() sur une entreprise, une application qui s'exécute jQuery 1.7.1.
    • .live() a été supprimée pour toutes les versions de jQuery. Avant la 1.7, il est recommandé d'utiliser .delegate(), pas .live().
    • pas publier votre propre réponse au lieu de downvoting la mienne? J'utilise live() chaque jour avec toutes les versions de moins de 1,6 et il fonctionne très bien. Je peux voir que vous êtes bon à la lecture de la documentation, mais il est parfois aider à mettre quelque chose en pratique pour une personne. .live() fonctionne. Période.
    • Je ne poste ma propre réponse et ne pas downvote la vôtre vous n'allez pas faire ces aveugles hypothèses. Pré 1.7, .delegate() effectue beaucoup mieux que .live() c'est pourquoi la doc jQuery, il recommande, et dénonçait .live(). Oui, .live() fonctionne toujours, mais les réponses ici sur devraient DONC recommander la meilleure manière de faire les choses. Je l'ai vu 20 fois ici sur DONC. Si vous affichez le code avec .live() ici, il sera reçu downvoted (et pas par moi, sauf si il ya quelque chose de mal avec elle).
    • Je n'ai pas downvote, mais bien que .live() fonctionne bien même dans la version 1.7, vous devriez toujours utiliser .delegate() ou .on() parce que .live() est déconseillée pour une bonne raison. Tant que vous notez le changement dans la syntaxe pour les deux plus récents, soit les fonctions fonctionnent correctement.
    • Vous avez absolument raison. Long de la journée. Toutes mes excuses.
    • .vivre est un sauveur des anciennes versions de jQuery.Merci mec.

    InformationsquelleAutor Matt Cashatt
  7. 3

    J'ai utilisé "vivre" dans mon projet, mais un de mes ami a suggéré que je devrais utiliser " on " au lieu de vivre.
    Et quand j'ai essayé d'utiliser ce que j'ai vécu un problème comme vous l'avez fait.

    Sur mes pages, j'ai créer des boutons de lignes de la table et beaucoup dom choses de façon dynamique. mais quand j'utilise la magie a disparu.

    Les autres solutions comme l'utiliser comme un enfant appelle simplement vos fonctions à chaque fois sur chaque clic.
    Mais je trouve un moyen pour le faire à nouveau et c'est ici la solution.

    Écrire votre code comme:

    function caller(){
    $('.ObjectYouWntToCall').on("click", function() {...magic...});
}

    Appel de l'appelant(); après la création de votre objet dans la page comme ceci.

    $('<dom class="ObjectYouWntToCall">bla... bla...<dom>').appendTo("#whereeveryouwant");
caller();

    Par ce moyen, votre fonction est appelée lorsqu'il est supposé ne pas chaque fois que vous cliquez sur la page.

    InformationsquelleAutor Coderx07