Trigger event listener once div is not clicked

Asked Mar 12 '20 at 07:05

Active Mar 12 '20 at 07:11

Viewed 21 times

I have a div: <div id="navUserDetailsNotifications"> and another div: <div id="navNotifications">. The initial state is that the first div is displayed (display: flex) and the second one is not (display: none). I want to attach "navUserDetailsNotifications" div 2 event listeners:

When click on it, then the second one is displayed (display: flex).
When click on document and the clicked element is not navUserDetailsNotifications then make display: none to the second div.

This is my try:

let navUserDetailsNotificationsOBJ = $('#navUserDetailsNotifications');
let navNotificationsOBJ = $('#navNotifications');

$(document).on('click', ':not(#navUserDetailsNotifications)', function() {
        navNotificationsOBJ.css('display', 'none');
});

navUserDetailsNotificationsOBJ.on('click', function() {
        navNotificationsOBJ.css('display', 'flex');
});

This is not working, why is it?

asked Mar 12 '20 at 07:05

J HAED

[How do I detect a click outside an element?](https://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element) – Alive to die - Anant Mar 12 '20 at 07:15
did you try replacing $(document) with $(document.body) – iustinian Mar 12 '20 at 07:20

Trigger event listener once div is not clicked

0 Answers0