Question

有没有人有类似的经历？我想编写一个代码，在单击图像进行进一步操作时触发用户。我编写jQuery代码但在触发器中没有成功，代码如下

  $( "#tab-3-list img" ).on( "click", function(e) {
    e.preventDefault();
    windows.alert( $(this).id);
  });

以下是HTML代码

<div id="tab-3-list">
    <div class="ui-grid-a">
        <div class="ui-block-a"><div class="imgspace"><img id="c01" class="coupon_list" src="/images/coupon/c01.png"></div></div>
        <div class="ui-block-b"><div class="imgspace"><img id="c02" class="coupon_list" src="/images/coupon/c02.png"></div></div>
    </div><!-- /grid-a -->
</div><!-- /tab-3-list -->

/ ------------------------------- /

我终于发现问题是如果我将div＃tab-3放在主体中，那么浏览器可以触发图像上的点击。但是如果使用脚本

从外部文件加载div＃tab-3，它就不起作用

（文档）$ .load（ “list.html”）;

Answer 1

您的选择器很好，假设您要处理任一图像元素的点击，并且您的.on("click")绑定将起作用，假设您将该代码包含在文档就绪处理程序中或在尝试访问的元素之后的脚本块中。（并假设您在相关代码之前已在页面上包含jQuery。）

但是，处理函数中有两个错误：

它应该是window.alert()，而不是windows.alert()（“窗口”中没有“s”）。或者，您可以在没有alert()的情况下说出window。
$(this)返回一个没有id属性的jQuery对象，因此$(this).id返回undefined。只需使用this.id即可。如果您想在点击的图片上调用jQuery方法然后，您可以使用$(this)，例如$(this).hide()。

所以这样：

$(document).ready(function () {

    $("#tab-3-list img").on("click", function (e) {
        e.preventDefault();
        window.alert(this.id);
    });

});

演示：http://jsfiddle.net/JZvvs/

如何触发多个选择器

1 个答案: