web-dev-qa-db-fra.com

Jquery $ ("img"). Le sélecteur click (function () ne fonctionne pas

Pour une raison quelconque, lorsque je clique sur une image avec ce code JQuery, l'écran d'alerte ne s'affiche pas.

HTML:

<div id="example1">
 <div>
  <div>
   <div class="user">
    <img class="Image" src="images/image.jpg">
   </div>
  </div>
 </div>
</div>

Javascript:

$(document).ready(function(){
 $("img").click(function(){
  alert("it works!");
 });
});

Je n'arrive pas à comprendre pourquoi cela ne fonctionne pas, j'ai inclus la bibliothèque jquery et le <script> le tag est sous le div

jqueryhtmlselector
12
Stefan

l'img n'est pas dans le DOM lorsque votre gestionnaire d'événements est enregistré. vous pouvez utiliser $('body').on('click','img',function(){alert('it works');})

28
electrophanteau
 $(document).ready(function(){
    $(".Image").click(function(){
    alert("it works!");
   });
  });

SI vous voulez que votre code fonctionne sans changement, mettez simplement .Image pas le nom de la classe pas le nom d'attribution

3
Mostafa Anssary

Plutôt que d'exécuter votre code dans document.ready (), vous devez utiliser la fonction window.load () à la place.

$(window).load(function() {
    $("img").click(function(){
        alert("it works!");
     });
});
  • document.ready () est un événement jQuery, il s'exécute lorsque le DOM est prêt, par ex. tous les éléments doivent être trouvés/utilisés, mais pas nécessairement tout le contenu.
  • window.load () se déclenche plus tard (ou en même temps dans le pire des cas/échec) lorsque les images et autres sont chargées, donc si vous utilisez des dimensions d'image par exemple, vous souhaiterez souvent l'utiliser à la place.
2
Biosopher

Essayez ceci, cela fonctionne aussi avec les images provenant d'une requête ajax.

$(document).on('click','img',function(){
alert("Click event works!");
});
0
csandreas1