javascript - 如何触发多个选择器

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") 绑定(bind)将工作假设您将该代码包含在文档就绪处理程序或它尝试访问的元素后面的脚本 block 。 (假设您已在页面上包含相关代码之前的 jQuery。)

但是，处理函数内有两个错误:

1. 它应该是window.alert()，而不是windows.alert()(“window”中没有“s”)。或者您可以只说alert()，而不使用window。

2. $(this) 返回一个没有 id 属性的 jQuery 对象，因此 $(this).id 返回未定义。只需使用 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/