JQuery图像点击事件不起作用答案

【问题标题】：JQuery image click event is not workingJQuery图像点击事件不起作用
【发布时间】：2016-02-12 01:13:12
【问题描述】：

我想在我的页面上单击图像时触发一个显示文本框的 JQuery 事件。我的页面的 HTML 代码是：

<body>
<div id="left_box">

<ul id="thumbnails">
<li>

<div class="photocontainer" width="100%">
<img class="photo" id="website1" src="photo1.jpg" alt="Click to see enlarged image" />
</div>
</li>
<li>
<div class="photocontainer">
<img class="photo" id="website2" src="photo2.jpg" alt="Click to see enlarged image" />
</div> 
</li>
</ul>
</div>

现在，我编写了 JQuery 代码以在用户单击 id="website2" 的图像时显示警报。代码是：

<script language="JavaScript" type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js">

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

    </script>

但是，图像点击事件没有任何反应。谁能告诉我哪里出错了？

提前致谢。

【问题讨论】：

四件事 - (1) <script> 标签，(2) 缺少 $(function() {...}) 包装器，(3) jQuery 选择器，(4) e.preventDefault() 是不必要的。四个答案都没有。

标签： javascript jquery html image onclick

【解决方案1】：

试试这个 javascript 代码：

$(document).ready(function () {
    $(".photo#website2").click(function () {
        alert("This image has been clicked!");
    });
})

另外，将 JQuery 库的导入与代码分开。

【讨论】：

【解决方案2】：

首先你需要关闭顶部标签并将你的其他 javascript 放在它自己的块中。

然后，您可以选择 .photocontainers 中的所有图像，而不是选择 #website2 元素，方法是

$(document).on("click", ".photocontainer img", function(e) {

而不是您的选择器。当然有多种方法可以做到这一点，但基本上你想将监听器附加到文档，第二个参数是选择器。

Here is a fiddle 向您展示我的实际意思，当然也请阅读jQuery on() documentation。

【讨论】：

【解决方案3】：

您只在#website2 上添加事件

$("body").on("click", ".photo", function(e) {
  e.preventDefault();
  alert("You clicked me");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="left_box">

<ul id="thumbnails">
<li>

<div class="photocontainer" width="100%">
<img class="photo" id="website1" src="photo1.jpg" alt="Click to see enlarged image" />
</div>
</li>
<li>
<div class="photocontainer">
<img class="photo" id="website2" src="photo2.jpg" alt="Click to see enlarged image" />
</div> 
</li>
</ul>
  </div>
  </body>

【讨论】：

【解决方案4】：

您不能在获取 jQuery 的 <script> 标记中包含 jQuery 脚本。

根据this SO answer：

不同的浏览器对此有不同的处理方式。有些仅在包含 src 且没有错误的情况下运行内容。有些人在尝试包含 src 脚本后运行它，无论成功与否。由于这种行为不可靠（并且在 HTML5 中被禁止），因此应该避免。

显然，它不可靠，并且在您的浏览器上不起作用。

此外，您可以使用 jQuery 内置的更简单的click() 事件处理程序：

$("#website2").click(function() {
    // code here
});

查看工作示例on JSFiddle.net。

【讨论】：

【解决方案5】：

如果你想alert() 和id="website2" 那么：

$("#website2").on("click",function()
{
    alert();
});

如果你想alert() 使用任何以id="website" 开头的图片，那么

$("[id^=website]").on("click",function()
    {
        alert();
    });

您不需要e.preventDefault()，因为点击图片既不会发布表单也不会重新加载页面。此外，您不需要将点击事件附加到 div，因为它们只是 img 元素的容器。

【讨论】：

【解决方案6】：

第一个带有 src 的脚本应该与带有代码的脚本分开

<script  type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js"></script>
<script>
  // your js code here
</script>

第二次改变

$('#website2').on("click","img,div", function (e) {

与

    $('body').on("click","#website2", function (e) { // if you dynamically append your elements
   // if not just use
   $("#website2").on('click',function(){
       // code here
   });

无需使用 e.preventDefault(); ..你用它来防止页面重新加载

完整代码

<script  type="text/javascript" src="/marketplaces/js/jquery-1.2.6.min.js"></script>
<script>
          $(document).ready(function(){
             $(".photocontainer img.photo").on('click',function(){
                  // code here
                  alert($(this).attr('src'));
              });
          });
</script>

并确保您已经在 /marketplaces/js/ 文件夹中拥有 jquery-1.2.6.min.js 文件

【讨论】：