jQuery 检测点击图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/9148409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-27 10:24:40  来源:igfitidea点击:

Detect click on an image

jqueryimageonclick

提问by coder

I am trying to load images dynamiaclly and displaying them as shown below

我正在尝试动态加载图像并显示它们,如下所示

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

This is my markup:

这是我的标记:

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

If I do this way on the div it gives me an alert but not on the image but on the div:

如果我在 div 上这样做,它会给我一个警报,但不是在图像上,而是在 div 上:

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

And I have tried using this way but it dosent give me any alert not even on the div also.

我已经尝试过使用这种方式,但它甚至不会在 div 上给我任何警报。

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

So how do I do this?

那么我该怎么做呢?

回答by Royi Namir

you should use the onmethod

你应该使用这个on方法

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

回答by Christofer Eliasson

It's a little hard to know exactly what your DOM looks like, but I guess you add the images to the div with class .imgContain. If you want to add a click event to those images you could do something like this:

确切地知道你的 DOM 是什么样子有点困难,但我猜你用 class 将图像添加到 div 中.imgContain。如果你想为这些图像添加一个点击事件,你可以这样做:

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

As I believe you are adding the images dynamically, you should use the .on()method to bind the click event, instead of using .click().

我相信您正在动态添加图像,因此您应该使用.on()方法来绑定单击事件,而不是使用.click().

NoteIf you for some reason are using a previous version of jQuery, you could change the .on()to use .live()instead.

注意如果您出于某种原因使用以前版本的 jQuery,则可以将 更改.on()为 use .live()

回答by Mahmoud Gamal

For the anchors <a>s that you appended, youwill need to use .live()in order to attach to it the click event like:

对于<a>您附加的锚点,您需要使用.live()它来附加点击事件,例如:

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

回答by Murtaza

Learn function live in jQuery. and use that in your code..

在 jQuery 中实时学习函数。并在您的代码中使用它..

jQuery version 1.4.1 and above.

jQuery 1.4.1 及以上版本。

since the elements are placed on the html dynamically after your page is loaded. Click function is not binded.

因为元素在页面加载后动态放置在 html 上。点击功能没有绑定。