使用.on进行jQuery事件委托（此引用）

Question

这在委托的.on事件中引用了哪些内容？ 例如：

$('#foo').on('click', $('.bar'), function() {
    console.log(this);
});

在示例中，这将引用#foo。但是我如何访问被点击的条形元素？我可能有5个bar元素，我想知道哪个被点击了。

由于

编辑： 抱歉，我将#bar更改为.bar（因为它存在多次）。

我应该使用'.bar'的答案有帮助。但如果我有这样的选择器怎么办：

$('.bar').find('a');

我如何加入这样的东西？

这不起作用:(因为这将引用#foo）

$('#foo').on('click', $('.bar').find('a'), function() {
    console.log(this);
});

Answer 1

将其更改为此...

$('#foo').on('click', '.bar', function() {
    console.log(this);
});

现在this将被点击.bar。

如果你想要一个jQuery对象，那么正常使用$(this)。

修改

根据对问题代码的更改，您需要这个......

$('#foo').on('click', '.bar a'), function() {
    console.log(this);
});

这只是将click事件处理程序扩展为document.ready中可能不存在的.bar元素内的链接。

Answer 2

两种方式。

1. 调用.on()时使用字符串选择器而不是jQuery对象：

   $('#foo').on('click', '#bar', function() {
       console.log(this); // #bar
   });
   

2. 指定jQuery规范化事件对象的参数名称，并使用其target属性：

   $('#foo').on('click', $('#bar'), function(e) {
       console.log(this); // #foo
       console.log(e.target); // #bar
   });
   

编辑：忽略第二个选项。 jQuery不接受选择器的jQuery对象，因此只是忽略它。您将不设置事件委派，而只需在click上设置静态#foo事件处理程序，该处理程序因事件传播而起作用。

Answer 3

ID应在页面中使用一次。因此，您可以为5个元素添加一个类fooClass并执行：

$('.fooClass').onclick(function() {
  alert("my bar element: " + $(this));
});

并使用$(this)执行您想要的操作。