JQuery图像单击事件不起作用

JQuery image click event is not working

本文关键字：不起作用 事件 单击 图像 JQuery      更新时间：2023-09-26

我想触发一个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>

然而，图像点击事件不会发生任何事情。有人能告诉我哪里出了问题吗？

提前谢谢。

试试这个javascript代码：

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

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

首先，您需要关闭顶部标记，并将其他javascript放在自己的块中。

然后，你可以通过选择里面的所有图像，而不是选择#website2元素

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

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

这里有一个小提琴来向您展示我在实际操作中的意思，当然还可以阅读jQueryon（）文档。

您只在#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>

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

根据SO的回答：

不同的浏览器对此有不同的处理方式。有些只在包含src时才运行内容，而不会出现错误。有些人在尝试包含src脚本后运行它，不管成功与否。由于这种行为是不可靠的（并且在HTML5中被禁止），因此应该避免。

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

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

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

请参阅JSFiddle.net上的工作示例。

如果您希望使用id="website2"进行alert()，则：

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

如果您希望使用任何以id="website"开头的图像alert()，则

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

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

带有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文件

相关文章：