button click jquery not working

Question

Should be a really simple answer but I can't figure it out right now. I have this button:

<button id="logout" type="button">Logout</button>

And it's supposed to run this jQuery code within script tags at the bottom of the body:

$("#logout").addEventListener("click", function () {
    alert('Button Clicked');
});

However, no alert pops up. I don't get it. Thanks in advance.

Answer 1

addEventListener is a method of DOM element not of jQuery object which is an array-like structure that contains all the selected DOM elements

To attach event using jQuery, use .on => Attach an event handler function for one or more events to the selected elements

Try this:

$("#logout").on("click", function() {
  alert('Button Clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="logout" type="button">Logout</button>

Using JS:

document.getElementById("logout").addEventListener("click", function() {
  alert('Button Clicked');
});

<button id="logout" type="button">Logout</button>

Edit: You can get first DOM element from array-like object returned by jQuery selector using $(SELECTOR)[0] or $(SELECTOR).get(0)

Answer 2

addEventListener() method registers the specified listener on the EventTarget.

If you really want to use addEventListener then write the following code:

var el = document.getElementById("logout");
el.addEventListener("click", function () {
     alert('Button Clicked');
}, false);

Otherwise do it with jquery

$(document).on("click", "#logout", function () {
    alert('Button Clicked');
});

OR

$("#logout").on("click", function () {
        alert('Button Clicked');
    });