I have a td like below.
<td class="volunteer" id="422" data-select2-id="select2-data-422">
<select multiple="" data-select2-id="select2-data-1-dpng" tabindex="-1" class="select2-hidden-accessible" aria-hidden="true">
//more code here
</select>
<span class="select2 select2-container select2-container--default select2-container--below select2-container--focus" dir="ltr" data-select2-id="select2-data-2-ooba" style="width: 16px;">
//more code here
</span>
</td>
I would like to detect click outside of this td. I used below jQuery code.
$(document).click(function (e) {
alert('hello');
$('.volunteer *').unbind('click');
});
But it is not working.
First of all, I'd add the listener to document.body then I'd check if the event target is or is contained in volunteer
$(document.body).click(function (e) {
alert('hello');
if (!e.target.closest('.volunteer')) {
$('td.volunteer *').unbind('click');
}
});