JQuery 图片点击事件无效

Question

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

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

提前致谢。

Answer 1

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

并确保 jquery-1.2.6.min.js 文件位于 /marketplaces/js/ 文件夹

Answer 2

试试这个 javascript 代码：

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

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

Answer 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>

Answer 4

您不能在获取 jQuery.

的 <script> 标签中包含 jQuery 脚本

根据this SO answer：

Different browsers treat this differently. Some run the content only if the src is included without error. Some run it after attempting to include the src script, regardless of success. Since this behaviour is unreliable (and prohibited in HTML5), it should be avoided.

显然，它不可靠，无法在您的浏览器上运行。

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

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

查看工作示例 on JSFiddle.net。

Answer 5

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

然后，您可以 select .photocontainers 中的所有图像，而不是 selecting #website2 元素

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

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

Here is a fiddle to show you what I mean in action and of course read the jQuery on() documentation.

Answer 6

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

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

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

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

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

JQuery 图片点击事件无效

JQuery image click event is not working

html

javascript

jquery

image

onclick