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>
$('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>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!
You could use .is()
Check the current matched set of elements against a
selector, element, or jQuery object and returntrueif 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
}
});
