如何使用 jQuery 添加事件侦听器？

Question

Have this code and tried to hide my side navbar when clicked outside the #nav , got this error.

Cannot read property 'addEventListener' of null

$( document ).ready( function() {
    setTimeout(function(){
        $('.menu-opener').click(function(){
            $('#nav').toggleClass('active');
        });
        let slide = document.querySelector('#nav .active');
        slide.addEventListener('click', function(e) {
            if (e.target !== slide) return;
            $('#nav').removeClass('active'); 
        });
    }, 1000);
}); 

Answer 1

answer is that you need to detect click outside of div you are trying to hide:

$(window).click(function() {
//Hide the menus if visible
});

//stopping above function from  running when clicking on #nav itself
$('#nav').click(function(event){
    event.stopPropagation();
});

Answer 2

Try this inside setTimeout

$('body').on('click','#nav .active', function(e){
   // your logic
})

OR

$( "'#nav .active'" ).bind( "click", function(e) {
// your logic
});

instead of

let slide = document.querySelector('#nav .active');
        slide.addEventListener('click', function(e) {
            if (e.target !== slide) return;
            $('#nav').removeClass('active'); 
        });

Answer 3

Got this working with

$(document).click(function(event) { 
    if(!$(event.target).closest('#nav').length && !$(event.target).closest(".menu-opener").length)
    {
        $('#nav').removeClass('active');
    }        
});