web-dev-qa-db-fra.com

$ (document) .on ("clic" ... ne fonctionne pas?

Y a-t-il une erreur bien connue que je pourrais commettre ici?

J'ai un script qui utilise .on () parce qu'un élément est généré dynamiquement et qu'il ne fonctionne pas. Juste pour tester, j'ai remplacé le sélecteur par l'enveloppe de l'élément dynamique, qui est statique, et cela n'a toujours pas fonctionné! Quand je suis passé au bon vieux .click pour le wrap, cela a fonctionné, cependant.
(Cela ne fonctionnera tout simplement pas pour l'élément dynamique, celui qui compte vraiment.)

Cela fonctionne:

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

Cela ne:

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

UPDATE:

J'ai cliqué avec le bouton droit de la souris et effectué "Inspecter élément" dans Chrome simplement pour vérifier quelque chose, puis l'événement de clic a fonctionné. J'ai rafraîchi et cela n'a pas fonctionné, élément inspecté, puis cela a fonctionné. Qu'est-ce que ça veut dire?

jqueryclick
73
Mr. Lavalamp

Vous utilisez la syntaxe correcte pour la liaison au document afin d'écouter un événement de clic pour un élément avec id = "test-element".

Cela ne fonctionne probablement pas pour l'une des raisons suivantes:

  • Ne pas utiliser la version récente de jQuery
  • Ne pas envelopper votre code dans DOM ready
  • ou vous faites quelque chose qui empêche l'événement de se propager à l'auditeur sur le document.

Pour capturer des événements sur des éléments créés APRÈS déclarant vos écouteurs d'événement, vous devez vous lier à un élément parent ou à un élément situé plus haut 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, seule l'alerte "lié au document" sera déclenchée.

JSFiddle avec jQuery 1.9.1

131
itsmejodie

Votre code devrait fonctionner, mais je suis conscient que cette réponse ne vous aide pas. Vous pouvez voir un exemple de travail here (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 identifiant au lieu d'un cours. Si vous avez plusieurs éléments avec un ID sur la page, alors jquery renverra uniquement le premier élément avec cet ID . Il n'y aura pas d'erreur car c'est comme ça que ça marche. Si tel est le problème, vous remarquerez que l'événement click fonctionne pour le premier test-element mais pas pour les suivants.

Si cela ne décrit pas correctement les symptômes du problème, votre sélecteur est peut-être dans l'erreur. Votre mise à jour m'amène à croire que c'est le cas en raison de l'inspection d'un élément, du fait de cliquer à nouveau sur la page et de déclencher le clic. Ce qui pourrait en être la cause est si vous mettez l'écouteur d'événements sur le document réel au lieu de test-element. Dans ce cas, lorsque vous cliquez sur le document et que vous le reconnectez (par exemple, depuis la fenêtre du développeur jusqu'au document), l'événement se déclenche. Si tel est le cas, vous remarquerez également que l'événement click est déclenché si vous cliquez entre deux onglets différents (parce qu'ils sont deux documents différents et que vous cliquez par conséquent sur le document.

Si ni l'un ni l'autre ne sont la solution, publier du HTML facilitera grandement la tâche.

9
smilebomb

Un ancien post, mais j'aime partager car j'ai le même cas mais je connaissais enfin le problème:

Le problème est le suivant: nous créons une fonction avec laquelle travailler avec un élément HTML spécifié, mais l'élément HTML associé à cette fonction n'est pas encore créé (car l'élément a été généré de manière dynamique). Pour que cela fonctionne, nous devons créer la fonction en même temps que nous créons l'élément. Élément premier que make en fonction.

Simplement Word, une fonction ne fonctionnera que sur l'élément qui l'a créé avant lui. Tout élément créé dynamiquement signifie après lui.

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

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

Dynamiquement ajouté:

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

Cette fonction fonctionne 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 un corps comme:

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

comparer à cela qui ne fonctionne pas:

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

j'espère que ça va aider

4
Sulung Nugroho

Cela marche:

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

Voici le violon

2
iGanja

Essaye ça:

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

La façon de le faire est étrange aussi. Cela aurait du sens pour moi si je l'utilisais pour un sélecteur de classe, mais dans le cas d'un identifiant, vous n'avez probablement qu'un DOM inutile à y parcourir. Dans le cas du sélecteur id, vous obtenez cet élément instantanément.

2
Eduárd Moldován