$(document).on('click', function() {
if ($(this).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement"></i></div>Want to check whether the div is clicked else somewhere is clicked using this way. Really appreciate your help, explain if possible.Thanks <3
Inside a jQuery function event handler, this will refer to the element you attached the listener to. Here, it's document, so that's what this is.
$(document).on('click', function() {
console.log(this === document);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>Check if the event.target (which will point to the element the event was dispatched to - the innermost element) is the clicked element instead.
$(document).on('click', function(e) {
if ($(e.target).is('#clickedElement')) {
console.log('this is clicked');
} else {
console.log('somewhere else clicked');
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-options-icon"><i class="far fa-trash" id="clickedElement">click</i></div>