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是包含clicked元素的变量。你不能将它用作字符串。使用.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>

Answer 2

您可以使用.is()

根据selector，元素或jQuery对象检查当前匹配的元素集，如果这些元素中至少有一个与给定的参数匹配，则返回true。

并且选择器不正确而是使用event.currentTarget，当您使用$('this')时Element Selector (“element”)因为您没有this的HTML元素，条件不起作用

事件冒泡阶段中的当前DOM元素。

$('body').on('click', '.foo, .bar', function (event) {
    if ($(event.currentTarget).is('.bar')) {
        //Your code
    }
});

Answer 3

使用currentTarget回调的event属性。

$('body').on('click', '.foo, .bar', function (e) {
  $(e.currentTarget).hasClass('foo') {
    alert('Foo has been clicked');
  }

  $(e.currentTarget).hasClass('bar') {
    alert('Bar has been clicked');
  }
});

希望这有帮助！

如何检测使用jquery添加动态的clicked元素？

3 个答案: