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

Question

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

J'ai un script qui utilise .on() parce qu'un élément est généré dynamiquement, et cela ne fonctionne pas. Juste pour le tester, j'ai remplacé le sélecteur par le wrap de l'élément dynamique, qui est statique, et cela ne fonctionne toujours pas ! Lorsque j'ai utilisé le bon vieux .click pour le wrap, cela a fonctionné.
(Cela ne fonctionnera pas pour l'élément dynamique évidemment, celui qui compte).

Ça marche :

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

Ce n'est pas le cas :

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

UPDATE :

J'ai cliqué avec le bouton droit de la souris et fait "Inspecter l'élément" dans Chrome pour vérifier quelque chose, puis l'événement de clic a fonctionné. J'ai actualisé le site et cela n'a pas fonctionné, j'ai inspecté l'élément et cela a fonctionné. Qu'est-ce que cela signifie ?

Answer 1

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

Il ne fonctionne probablement pas à cause d'une des raisons suivantes :

• Pas de version récente de jQuery
• Ne pas envelopper votre code dans un DOM prêt
• soit vous faites quelque chose qui empêche l'événement de remonter jusqu'à l'écouteur du document.

Pour capturer les événements sur les éléments qui sont créés APRÈS déclarer vos écouteurs d'événements - vous devez vous lier à un élément parent, ou à un élément plus élevé 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 "bound to document" sera déclenchée.

JSFiddle avec jQuery 1.9.1

Answer 2

Votre code devrait fonctionner, mais je suis conscient que cette réponse ne vous aide pas. Vous pouvez voir un exemple fonctionnel 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 d'un élément sur la page avec un ID, alors jquery retournera seulement le premier élément avec cet ID . Il n'y aura pas d'erreur car c'est ainsi que cela fonctionne. Si c'est le problème, vous remarquerez que l'événement de clic fonctionne pour la première fois. test-element mais pas pour celles qui suivront.

Si cela ne décrit pas précisément les symptômes du problème, alors peut-être que votre sélecteur est erroné. Votre mise à jour m'amène à penser que c'est le cas parce que vous inspectez un élément puis cliquez à nouveau sur la page et déclenchez le clic. Si vous placez l'écouteur d'événements sur l'élément réel document au lieu de test-element . Si c'est le cas, lorsque vous cliquez hors du document et que vous y revenez (par exemple, de la fenêtre de développement vers le document), l'événement se déclenche. Si c'est le cas, vous remarquerez également que l'événement de clic est déclenché si vous cliquez entre deux onglets différents (parce qu'il s'agit de deux onglets différents). document et donc vous cliquez sur le document.

Si aucune de ces solutions n'est la bonne, l'affichage du code HTML vous aidera à trouver la solution.

Answer 3

Un vieux post, mais j'aime partager car j'ai le même cas mais j'ai finalement connu le problème :

Le problème est le suivant : Nous faisons une fonction pour travailler avec un élément HTML spécifié, mais l'élément HTML lié à cette fonction n'est pas encore créé (car l'élément a été généré dynamiquement). Pour que cela fonctionne, nous devons créer la fonction en même temps que l'élément. On crée d'abord l'élément, puis la fonction qui lui est associée.

En clair, une fonction ne fonctionne que sur l'élément qui l'a précédée (lui). Tout élément créé dynamiquement signifie après lui.

Mais veuillez inspecter cet échantillon qui n'a pas tenu compte du cas précédent :

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

Ajouté dynamiquement :

<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 à ce qui ne fonctionne pas :

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

J'espère que cela vous aidera

Answer 4

Ça 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

Answer 5

Essayez ça :

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

La façon dont le document le fait est bizarre aussi. Cela aurait un sens pour moi si elle était utilisée pour un sélecteur de classe, mais dans le cas d'un id, vous avez probablement juste un DOM inutile qui traverse là. Dans le cas d'un sélecteur d'id, vous obtenez cet élément instantanément.