I am encountering an issue with the code snippet below. The functionality involves a button that toggles a div. Within this toggle div, there are several other divs and elements.
$(function () {
$('#btn').click(function (e) {
e.preventDefault();
console.log('clicked toggle');
$('#Popover').toggle();
if ($('#Popover:visible').length == 0) {
$('#Popover').hide();
} else {
$('#Popover').show();
}
});
});
$(document).on('click', function (e) {
var container = $('#Popover');
var trigger = $('#btn');
if (($(e.target).closest(trigger).length === 0) && ($(e.target).closest(container).length === 0)) {
container.hide();
}
});
The current behavior is satisfactory as the button successfully toggles the div. However, when I click on a div within the toggle div, the entire toggle div also hides.
This issue may be related to the functioning of the && operator in my code.
There is a possibility that it could be due to a postback issue. For reference, here is the onclick method for a specific div (div id="hourInc") located inside the toggle div:
$('#hourInc').click(function (e) {
e.preventDefault();
var hour = $('#cn_TimeHour').val();
if (hour < 12) {
hour = (hour * 1) + 1;
}
else {
hour = 0;
}
$('#cn_TimeHour').val(("0" + hour).slice(-2));
setTime();
});