$(document).on(“click”... pas de travail?

Est-il bien connu erreur que j'ai pu faire ici?

J'ai un script qui utilise .sur (), parce qu'un élément est généré dynamiquement, et il ne fonctionne pas. Juste pour tester, j'ai remplacé le sélecteur avec la dynamique de l'élément d'enveloppement, qui est statique, et il ne fonctionne toujours pas! Quand je suis passé à la plaine de vieux .cliquez sur pour l'écharpe, il a travaillé, si.

(Ce qui ne veut pas travailler pour l'élément dynamique de toute évidence, le seul qui compte.)

Cela fonctionne:

$("#test-element").click(function() {
    alert("click");
});

Ce n'est pas le cas:

$(document).on("click","#test-element",function() {
    alert("click");
});

Mise à JOUR:

J'ai cliqué droit et de fait "Inspecter l'Élément" dans Chrome il suffit de double-vérifier quelque chose, et puis après que l'événement click travaillé. J'ai actualisé et il n'a pas de travail, inspecter l'élément, puis il a travaillé. Qu'est-ce que cela signifie?

  • Êtes-vous créer plus d'un élément avec le même ID ?
  • Poster simplement le jQuery sans HTML, ce qui rend difficile de les aider.
  • Hiya OP, veuillez vérifier la version de Jquery que vous utilisez, :) ou vers un violon, je pourrais vous aider,
  • Vous code est censé fonctionner. Le on fonction a été ajoutée dans jquery 1.7, assurez-vous d'avoir une version récente. Edit : la preuve pour vous qu'il fonctionne sur le violon
  • Votre deuxième exemple fonctionne avec la dernière 1.x version de jQuery: jsfiddle.net/AJPdS
  • #test est l'élément dynamique ou l'emballage d'éléments dynamiques?
  • #test est l'élément d'emballage. J'ai Jquery 1.10.2. (J'ai eu 1.9.2, mais j'ai mis à jour et il ne fonctionne toujours pas)
  • Ensuite, essayez ce $('#test-element').on("click","*",function() ou $(document).on("click","#test-element *",function() cela permettra de fixer gestionnaire d'événements pour les enfants.
  • Enveloppez-les dans du $(document).ready()
  • $(document).sur les() ne fonctionne pas, même pour l'écharpe, si.
  • Fonctionne très bien ici: jsfiddle.net/j08691/TkLex
  • Pouvez-vous fournir le code?
  • Avez-vous essayé un autre navigateur?
  • Je dirais que nous avons épuisé toutes nos suppositions. Nous aurons besoin de code à fournir toute autre idée.
  • C'est bizarre, si vous déclenchez cliquez sur, cela fonctionne, si vous cliquez directement, il n'est pas fiddle.jshell.net/Palestinian/MEAkF
  • votre violon fonctionne très bien si vous cliquez sur l'enfant.
  • Encore une fois, êtes-vous l'insertion d'un élément avec le même ID d'un élément déjà existant. Si oui, cela ne fonctionnera jamais, peu importe ce que vous faites.
  • Je vais revenir avec un peu de code lorsque j'ai eu la chance si je n'ai pas le comprendre, j'espérais que quelqu'un pense à s'en sortir. Merci pour la tentative, les gars. (C'est un 3000 ligne de la page)
  • Je suis de l'iPad, sa ne marche pas même avec le tap, merci copain 🙂
  • eh bien, si c'est de 3000 lignes de code, de s'assurer de quelque chose n'est pas à défaut d'avant.
  • Ouais, il n'est pas. J'ai été vigoureusement les tests de chaque pièce que je la mettre en œuvre.
  • Vous ne savez pas si quelqu'un l'a déclaré, mais si vous n'avez pas de travail sur cliquez d'abord, mais ensuite la deuxième, et rafraîchissant ne marche pas il est lié pendant le premier événement de clic. La liaison est incorrect.
  • Essayez de vider le cache, ou lors de l'utilisation de l'outil d'inspection dans Chrome (DevTools), allez à l'onglet Réseau, puis cliquez sur Désactiver le cache

InformationsquelleAutor Mr. Lavalamp | 2013-07-11
  1. 130

    Vous utilisez la syntaxe correcte pour la liaison au document pour écouter cliquez sur un événement pour un élément avec id="test-élément".

    Ce n'est probablement pas de travail en raison de l'un des:

    • Pas utiliser une version récente de jQuery
    • Pas d'emballage de votre code à l'intérieur de DOM prêt
    • ou vous faites quelque chose qui provoque l'événement à ne pas remonter jusqu'à l'écouteur sur le document.

    De la capture des événements sur les éléments qui sont créés APRÈS déclaration de vos écouteurs d'événement - il est conseillé de lier un élément parent, ou d'un élément supérieur dans la hiérarchie.

    Par exemple:

    $(document).ready(function() {
    //This WILL work because we are listening on the 'document', 
    //for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    //This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    //Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

    Dans cet exemple, seul le "lié au document" alerte incendie.

    JSFiddle avec jQuery 1.9.1

    • Malheureusement, je suis en utilisant une version récente de Jquery, mon code est bien emballé, c'est à l'intérieur de $(document).prêt, et l'événement a cliqué est le plus bas niveau de l'élément dans le document. Ça, c'est incompréhensible.
    • Je dirais "besoin de mettre l'auditeur dans l'élément parent" n'est pas essentiel, bien que j'ai trop le recommander. Le bouillonnement est ce qui permet de .sur() pour travailler. Si nous ne pouvions pas compter sur bouillonnante à aller au-delà de l'immédiat, de ses parents, il ne serait pas une très bonne solution.
    • bon point, et comme vous le suggérez, le "besoin" n'est pas le mot juste car il y a d'autres moins idéal façons d'accomplir cela. J'ai révisé ma réponse.
    • si je suis à l'aide de "ce" pour faire référence à l'élément object alors comment puis-je le joindre à l'événement avec le document..
    • J'ai le même problème, je suis déjà à l'aide de document. Encore sa ne fonctionne pas. Mon jQuery version 1.7.2. Toutes les suggestions
    • super j'ai été frappé pendant 5 jours.. son aide complète.. votre réponse de l'aide totale. Je vous remercie beaucoup.
    • J'ai enveloppé le tout dans une IIFE comme ça: (() => { // déclencheur })(); et j'ai oublié d'écrire les "()"-entre parenthèses à la fin. Donc, mon déclencheur n'a jamais été enregistrée
    • Je vais avoir un très problème similaire avec un créé dynamiquement bouton apportent pas déclenchée par un clic. Au lieu de cela le "document" peut être cliqué pour déclencher l'alerte. Je ne comprends pas pourquoi.
    • j'imagine que si vous avez un listener sur le document, il y a un problème avec l'événement à ne pas remonter (à partir du clic sur le bouton), ou la différence entre event.target et event.currentTarget quelque part dans votre code, mais il y a beaucoup de choses qu'il pourrait être, y compris les événements de pointeur être désactivé sur le bouton
    • Yep. Je viens de découvrir que c'était la bonne hypothèse. C'était un phénomène de propagation question.
    • Première solution qui fonctionne pour moi, merci!
    • Pour moi, le problème était le jQuery 1.4.4. Le Uncaught TypeError: jQuery(...).sur n'est pas une fonction s'en alla après la mise à niveau de 1.11.3.

    InformationsquelleAutor itsmejodie
  2. 9

    Votre code devrait fonctionner, mais je suis conscient que la réponse ne vous aide pas. Vous pouvez voir un exemple de travail ici (jsfiddle).

    Jquery:

    $(document).on('click','#test-element',function(){
    alert("You clicked the element with and ID of 'test-element'");
});

    Comme quelqu'un l'a déjà souligné, vous utilisez un ID au lieu d'une classe. Si vous avez plus qu'un élément de la page avec un ID, jquery sera de retour uniquement le premier élément avec ID. Il n'y aura pas d'erreurs, puisque c'est la façon dont il fonctionne. Si c'est le problème, vous remarquerez que l'événement click fonctionne pour le premier test-element mais pas pour n'importe qui suivent.

    Si ce n'est pas de décrire de manière précise les symptômes du problème, alors peut-être que le sélecteur est mauvais. Votre mise à jour m'amène à croire que c'est le cas en raison de l'inspection d'un élément, puis en cliquant à nouveau sur la page et cliquez sur le déclenchement de la. Ce qui pourrait être à l'origine de ce est si vous mettez l'écouteur d'événement sur le document au lieu de test-element. Si donc, lorsque vous cliquez sur désactiver le document et à l'arrière (comme par le développeur de la fenêtre pour revenir au document) de l'évènement déclencheur. Si c'est le cas, vous noterez également que l'événement click est déclenchée si vous cliquez entre deux onglets différents (car ils sont deux différents documents et, par conséquent, vous en cliquant sur le document.

    Si aucune de ces sont la réponse, l'affichage HTML ira un long chemin vers essayer de le comprendre.

    InformationsquelleAutor smilebomb
  3. 4

    Un vieux post, mais j'aime partager des que j'ai le même cas, mais j'ai compris le problème :

    Problème est le suivant : Nous faire une fonction pour travailler avec un élément HTML, mais l'élément HTML liées à cette fonction n'est pas encore créé (parce que l'élément a été généré dynamiquement). Pour en faire des œuvres, il faut faire de la fonction dans le même temps, nous avons créer l'élément. L'élément premier de faire en fonction de ça.

    Seulement une parole, une fonction fonctionne uniquement à l'élément qui a créé avant de (lui). Tous les éléments créés dynamiquement après lui.

    Mais s'il vous plaît consulter cet échantillon qui n'a pas tenu compte le cas ci-dessus :

    <div class="btn-list" id="selected-country"></div>

    Dynamiquement ajoutés :

    <button class="btn-map" data-country="'+country+'">'+ country+' </button>

    Cette fonction est bien en cliquant sur le bouton :

    $(document).ready(function() {    
        $('#selected-country').on('click','.btn-map', function(){ 
        var datacountry = $(this).data('country'); console.log(datacountry);
    });
})

    ou vous pouvez utiliser le corps comme :

    $('body').on('click','.btn-map', function(){ 
            var datacountry = $(this).data('country'); console.log(datacountry);
        });

    comparer à ce qui ne fonctionne pas :

    $(document).ready(function() {     
$('.btn-map').on("click", function() { 
        var datacountry = $(this).data('country'); alert(datacountry);
    });
});

    espère que ça aidera

    InformationsquelleAutor Sulung Nugroho
  4. 2

    Essayez ceci:

    $("#test-element").on("click" ,function() {
    alert("click");
});

    Le document façon de faire est bizarre aussi. Qui serait logique pour moi si elle est utilisée pour un sélecteur de classe, mais dans le cas d'une pièce d'identité vous suffit probablement inutile DOM traversant là.
    Dans le cas du sélecteur d'id, vous obtenez ce que l'élément instantanément.

    • Comment est-ce différent de $("#test-element").click(function() { ?
    • En fait si, ça marche!!! Ce qui se passe exactement ici? Mon hypothèse était toujours que (document).travaillé pour générées dynamiquement des éléments, car il a vérifié l'ID de clics sur l'ensemble du document et n'est pas tributaire de tout ce qui existait sur le document de charge/prêt.
    • Vous devez utiliser .sur() pour lier les événements générés dynamiquement Dom - tout ce qui est lié avec .cliquez sur() va tenter de lier lorsque le document est prêt, et si le dom n'est pas présent, il ne se passera rien.
    • Attendre. Tant pis, il n'a pas de travail, j'étais muet. Il a travaillé pour l'ancien parent écharpe, mais pas encore pour le contenu dynamique.
    • Mais à l'aide de .on sans l'aide d'un selector est le même que l'application directement de l'événement click sur elle
    • Il n'est pas. Mon erreur sur ce point. Je voulais faire remarquer que vous devez utiliser à la place de votre deuxième. Qui n'a probablement même pas lié.
    • Essayez d'envelopper votre code à l'intérieur de DOM Ready gestionnaire
    • cela ne fonctionnera pas de manière dynamique
    • Ce n'est pas la bonne réponse pour la question. Cela va se lier directement à l'élément et, par conséquent, n'est pas adapté lorsque l'élément a été généré dynamiquement.
    • J'ai cliqué droit et de fait "Inspecter l'Élément" dans Chrome il suffit de double-vérifier quelque chose, et puis après que l'événement click travaillé. J'ai actualisé et il n'a pas de travail, inspecter l'élément, puis il a travaillé. Qu'est-ce que cela signifie?
    • Les gars, à partir de l'jquery docs: Comme de jQuery 1.7, l' .live() la méthode est obsolète. Utiliser .sur() pour attacher les gestionnaires d'événements. Les utilisateurs des anciennes versions de jQuery doit utiliser .délégué (), de préférence à d' .live(). ici, api.jquery.com/live --- .sur a de travailler.
    • Et il n'a pas d'importance si vous le lier directement à un id ou une classe ou à la ci-dessus bizarre document sélecteur. Sur a pour le travail, toujours.
    • comment est-ce pertinent? nous sommes en train de parler .sur()
    • vous êtes totalement faux, il y a deux versions de sur(), ce n'est pas celui de droite, celui de droite est dans l'OP du code.
    • Gars, avez-vous lu le jQuery docs? Permettez-moi de citer à nouveau, semble pas claire pour certains: "Par exemple, au lieu de $("body").on("click", "#commentForm .addNew", addComment) utiliser $("#commentForm").on("click", ".addNew", addComment)." Vous pouvez tous les trouver ici: api.jquery.com/on/#event-performance - et sur est dynamique. Le problème n'est-ce pas, probablement quelque chose d'autre.
    • J'ai effectivement lu les docs, mais la section sur la performance n'a pas vraiment rien avoir à faire avec les délégués des gestionnaires d'événements, et que votre code n'est pas un délégué du gestionnaire d'événement.
    • Le mien n'est pas, évidemment. $(document).sur("", ... peu importe) est. Aussi, je ne pouvais pas trouver les deux différents .sur -s - pourriez-vous fournir des liens à la fois? Je suis curieux sur l'un, je ne suis pas familier avec, comme vous le dites. Pourquoi sommes-nous on se bat pour ça de toute façon? .sur a travailler si utilisé correctement, avec une bonne sélecteurs.
    • Cela va à l'encontre de tout point de la question, l'élément dynamique.

    InformationsquelleAutor Eduárd Moldován
  5. 2

    Cela fonctionne:

    <div id="start-element">Click Me</div>

$(document).on("click","#test-element",function() {
    alert("click");
});

$(document).on("click","#start-element",function() {
    $(this).attr("id", "test-element");
});

    Ici est la Violon

    • Ce n'est pas généré dynamiquement, un élément, comme par la question.
    • d'accord, mais il est dynamiquement liée au gestionnaire d'événement. modification de l'id n'est pas essentiellement différent de l'ajout d'un élément du DOM.
    InformationsquelleAutor iGanja