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为＆= 34; website2＆＃34;的图片时显示警告。代码是：

<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

试试这个javascript代码：

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

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

Answer 2

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

然后，您可以通过

选择＃website2元素来选择＃website2元素中的所有图像，而不是选择＃website2元素。

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

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

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

Answer 3

第一个带有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 / folder中有jquery-1.2.6.min.js文件

Answer 4

您只需在＃website2上添加活动

＆＃13;

function calculate()
{
    var input = 0;
    if (document.getElementById("small").checked) 
    {
        input = input + document.getElementById("small").value;
    }
    else if (document.getElementById("medium").checked)
    {
        input = input + document.getElementById("medium").value;
    }
    else if (document.getElementById("large").checked)
    {
        input = input + document.getElementById("large").value;
    }
    else
    {
        alert("failed");
    }

    document.getElementById("outar").innerHTML = input;
}

＆＃13;

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

＆＃13;

Answer 5

你不能在获得jQuery的<script>标签中使用jQuery脚本。

根据this SO answer：

不同的浏览器对此有不同的看法。有些只在包含src且没有错误的情况下运行内容。有些人在尝试包含src脚本后运行它，无论成功与否。由于此行为不可靠（在HTML5中禁止），因此应避免使用。

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

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

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

参见工作示例on JSFiddle.net。

Answer 6

如果您希望alert() id="website2"，那么：

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

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

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

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

JQuery图像点击事件不起作用

6 个答案: