Question

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

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

这是我的标记：

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

如果我在div上这样做，它会给我一个提醒，但不是在图像上，而是在div上：

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

我尝试过使用这种方式，但它也没有给我任何警报，甚至连div也没有。

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

那我该怎么做？

Answer 1

您应该使用on方法

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

Answer 2

确切地知道你的DOM是什么样子有点难，但我想你会用class .imgContain将图像添加到div中。如果您想为这些图片添加点击事件，您可以执行以下操作：

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

由于我认为您是动态添加图片，因此您应该使用.on()方法绑定点击事件，而不是使用.click()。

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

Answer 3

对于您附加的锚点<a>，您需要使用.live()以便附加点击事件，例如：

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

Answer 4

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

jQuery 1.4.1及更高版本。

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

检测单击图像

4 个答案: