Question

我是Jquery的新手，我正在努力了解事件委派的工作原理。我正在尝试这个：

 $("#32298").on( 'click',function() { // event delegation
        alert("df");
        var imgs = document.getElementById("32298")[0].src;
        alert(imgs);

  });

当我点击带有此ID的图像时，我会收到第一个警报但第二个警报不起作用。

我在这里做错了什么？谢谢。

Answer 1

如果要执行事件委托，则事件处理函数的第二个参数需要是一个选择器，以匹配与您要单击的元素匹配的元素。

$(document.body).on('click', "#32290", function(event) {

您的代码问题与事件委派无关。 getElementById返回单个元素（文档中的id必须是唯一的），而不是HTML Collection。（与使用复数元素的getElementsByTagName和getElementsByClassName比较。）它没有0属性。

var imgs = document.getElementById("32298").src;

Answer 2

由于您使用的是jQuery，因此您只需使用$(this)构造函数，而不是document.getElementById()：

$("#32298").on( 'click',function() { 
    alert("df");
    var imgs = $(this).attr('src');
    alert(imgs);
});

对于它的价值，顺便说一下，这不是事件委托，它只是一个绑定到元素的事件。

如果必须使用vanilla JS来获取src属性，则不需要将索引传递给返回值getElementById()，因为此函数返回DOMObject而不是数组。更新如下：

$("#32298").on( 'click',function() {
    alert("df");
    var imgs = document.getElementById("32298").src;
    alert(imgs);
});

值得注意的是ID应该是唯一的，因此#32298应该引用DOM中的单个元素。我不知道这是否是一个错字，但似乎你可能有多个具有相同ID的元素（因为你使用变量名imgs - 即复数）。

Answer 3

你可以试试这个

$("#32298").click( function() {
  alert("df");
var imgs = $(this).attr('src');
alert(imgs);

});

JQUERY的事件委派问题

3 个答案: