How to add event listener using jQuery?

jquery on
jquery on click
jquery ::after click event
document on click jquery
jquery live
jquery form events
jquery button
jquery trigger click

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 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();
});

Attach an event handler function, This method is a shortcut for .on( "click", handler ) in the first two variations, and .​trigger( "click" ) in the third. The click event is sent to an element when the mouse​  The current DOM element within the event bubbling phase: event.data: Contains the optional data passed to an event method when the current executing handler is bound: event.delegateTarget: Returns the element where the currently-called jQuery event handler was attached: event.isDefaultPrevented()

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'); 
        });

.click(), Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java  link Tearing Down Event Listeners. To remove an event listener, you use the .off() method and pass in the event type to off. If you attached a named function to the event, then you can isolate the event tear down to just that named function by passing it as the second argument.

Got this working with

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

HTML DOM addEventListener() Method, Learn how to add event listeners in jQuery so that your JavaScript can respond to events on the Duration: 3:24 Posted: Sep 28, 2015 Add an Event Handler to the window Object. The addEventListener() method allows you to add event listeners on any HTML DOM object such as HTML elements, the HTML document, the window object, or other objects that support events, like the xmlHttpRequest object.

Adding event listeners with jQuery | DOM events with jQuery, which is used to attach one or more event handlers for the selected elements and child elements in the DOM tree. The DOM (Document Object Model) is a World Wide Web Consortium standard. This defines for accessing elements in the DOM tree. jQuery is tailor-made to respond to events in an HTML page. All the different visitors' actions that a web page can respond to are called events. An event represents the precise moment when something happens. The term "fires/fired" is often used with events. Example: "The keypress event is fired, the moment you press a key".

Adding event listeners with jQuery | Computer Programming, Which of the following methods helps us to attach one or more event handlers to a selected element? Due to a plugin being used, I can't add the "onClick" attribute to the HTML form inputs like usual. A plugin is handling the forms part in my site and it doesn't give an option to do this automatic

JavaScript DOM EventListener, Adds one or more event handlers to selected elements. This handler can only be triggered once per element Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. Learn more Is it possible to add an eventlistener on a DIV?

Comments
  • Please post your HTML code so we can see what your functions are referencing.
  • document.querySelector is returning null when element is not present on web page. So you can just put if condition before applying addEventListener method. Like as below: if( document.querySelector('#nav .active') != null ) {/* Code goes after this comment */}
  • why the setTimeout call ?
  • Set time was already there before. #nav is a list coming from left when a press a button wich adds the class 'active'. I think that the element is null just because on load the page have only the id nav and when i press the button the .active class is removed
  • TypeError: $(...).on is not a function this is the error message i got on this!
  • Method on was introduced in jQuery version 1.7. Might be you have lower version