web-dev-qa-db-fra.com

Détecter cliquez sur une image

J'essaie de charger dynamiquement des images et de les afficher comme indiqué ci-dessous

     var uploader = $('#<%=uploader.ClientId%>').plupload('getUploader');
              uploader.bind('FileUploaded', function (up, file, res) {
              $('#<%=thumbs.ClientId%>').append("<div id=" + file.id + ">
              <a href='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/>
              <img src='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "' width='70' height='55' data-full='Uploads/" + document.getElementById("<%=currentDirectory.ClientId%>").value + "/" + file.name + "'/></div>");
    });

Ceci est mon balisage:

  <div id="thumbs" class="imgContain" runat="server">
  </div>

Si je fais de cette façon sur le div, cela me donne une alerte mais pas sur l'image mais sur le div:

  $('.imgContain').click(function () {
    alert('You Clicked Me');
  });

Et j’ai essayé d’utiliser cette méthode, mais elle me donnait la moindre alerte, pas même sur le div.

 $('.imgContain a').click(function () {
        alert('You Clicked Me');
 });

Alors, comment je fais ça?

jqueryimageonclick
7
coder

vous devriez utiliser la méthode on

 $('.imgContain').on("click","a,img", function (e) {
      e.preventDefault();
      alert('You Clicked Me');
 });
11
Royi Namir

Il est un peu difficile de savoir exactement à quoi ressemble votre DOM, mais j'imagine que vous ajoutez les images à la div avec la classe .imgContain. Si vous souhaitez ajouter un événement de clic à ces images, vous pouvez procéder comme suit:

$('.imgContain').on("click", "img", function () {
    alert('You Clicked Me');
});

Comme je pense que vous ajoutez les images de manière dynamique, vous devez utiliser la méthode .on() pour lier l'événement click au lieu d'utiliser .click().

Remarque Si, pour une raison quelconque, vous utilisez une version antérieure de jQuery, vous pouvez modifier la fonction .on() pour qu'elle utilise plutôt la fonction .live().

4
Christofer Eliasson

Pour les ancres <a> que vous avez ajoutées, vous devrez utiliser .live() afin de lui associer l'événement click comme:

 $('.imgContain a').live("click", function (event) {
      event.preventDefault();
      alert('You Clicked Me');
 });
2
Mahmoud Gamal

Apprendre la fonction en direct dans jQuery. et l'utiliser dans votre code ..

jQuery version 1.4.1 et supérieure.

puisque les éléments sont placés dynamiquement sur le code HTML après le chargement de votre page. La fonction de clic n'est pas liée.

0
Murtaza