如何使用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是包含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”）時，因為您沒有HTML元素， this該條件不起作用。

事件冒泡階段中的當前DOM元素。

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

Answer 3

使用event回調的currentTarget屬性。

$('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');
  }
});

希望這可以幫助！