如何使用 jQuery 添加事件偵聽器？

Question

擁有此代碼並嘗試在#nav外部單擊時隱藏我的側面navbar ，出現此錯誤。

無法讀取 null 的屬性“addEventListener”

$( 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

答案是您需要檢測要隱藏的 div 之外的點擊：

$(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

在 setTimeout 中試試這個

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

或者

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

代替

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

Answer 3

得到了這個

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