CODEWITHSUNDEEP
javascriptjquery
Matt
Matt

Reputation: 1063

button click jquery not working

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.

Upvotes: 2

Views: 7409

Answers (8)

Sandeep Pal
Sandeep Pal

Reputation: 2175

var element = document.getElementById("logout");

element.addEventListener("click", myFunction);

function myFunction() {

     // your code logic comes here
}

Upvotes: 0

jack blank
jack blank

Reputation: 5203

If you go to your console like in firebug and type $() you will see the jQuery object that shows the methods and properties of the jquery function/object. There is no addEventListener on this object.

addEventlistener is a method for the DOM. If you want to take advantage of jQuery by "writing less and do more" use jQuery methods like on. This will allow you to add an event handler on an element.

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

Upvotes: 0

Rayon
Rayon

Reputation: 36609

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)

Upvotes: 11

Jobelle
Jobelle

Reputation: 2834

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        $("#logout").on("click", function () {
            alert('Button Clicked');
        });
    });
</script>
</head>

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

</html>

Upvotes: 0

Rahul Joshi
Rahul Joshi

Reputation: 193

Alternate answer is:

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

This works on dynamically created elements as well.

Upvotes: 1

Manish Jangir
Manish Jangir

Reputation: 5437

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

Upvotes: 1

Sukhmeet Singh
Sukhmeet Singh

Reputation: 130

You can use jQuery click/on function for getting the button to work.

Example:

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

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You should use on method to use the event handlers in jquery. The addEventListener is a core JavaScript event method.

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

You may still use addEventListner forcing jQuery code to JavaScript:

$("#logout")[0] //Now, this is JavaScript Object
   .addEventListener("click", function () {
    alert('Button Clicked');
});

Upvotes: 0

Related Questions