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

Question

How can I detect clicked element in code like this:

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') {
     //
   }
}

I try $('this') but returned body not clicked element. I try also e.target but I want get main element ( .foo or .bar ), not <a> / <b>

Answer 1

$('this') isn't right. this is variable that contain clicked element. You can't use it as string. Use .hasClass() to check element has specific class name.

$('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

You could use .is()

Check the current matched set of elements against a selector , element, or jQuery object and return true if at least one of these elements matches the given arguments.

and The selector is not correct instead use event.currentTarget , , when you use $('this') is Element Selector (“element”) since you have no HTML element as this the condition does't works.

The current DOM element within the event bubbling phase.

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

Answer 3

Use the currentTarget attribute of the event callback.

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

Hope this helps!