javascript - 如何使用jquery检测动态添加的点击元素？

Question

如何检测这样的代码中单击的元素:

HTML:

<div class="foo">
  <a href=""><b>Foo</b></a>
</div>   
<div class="bar">
  <a href=""><b>Bar</b></a>
</div>

jQuery:

$('body').on('click', '.foo, .bar', function (e) {     
   if (detectElement == '.bar') {
     //
   }
}

我尝试$('this')但返回body未单击的元素。 我也尝试e.target但我想要获取主要元素( .foo 或 .bar )，而不是 <a>/<b>

Answer 1

$('this') 不正确。 this 是包含单击元素的变量。您不能将其用作字符串。使用.hasClass()检查元素是否具有特定的类名。

$('body').on('click', '.foo, .bar', function (e) {
    if ($(this).hasClass('bar')) {
        // code
    }
});

$('body').on('click', '.foo, .bar', function (e) {
    if ($(this).hasClass('bar'))
        console.log("is .bar");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="foo">
  <a href="#"><b>Foo</b></a>
</div>
<div class="bar">
  <a href="#"><b>Bar</b></a>
</div>