How to use different methods to detect button clicks in Javascript?

Question

I started writing some javascript code to detect button presses. I have been googling all the different methods. I got stumped when some of them worked or didnt work in my code.

Here is a JS Fiddle that has 4 examples.

Can somebody explain why #1 or #4 does not work?

Here is the html test code.

<input type ='button'  value = "Test Button 1" id="Test_Button1" >
<input type ='button'  value = "Test Button 2" id="Test_Button2" >
<input type ='button'  value = "Test Button 3" id="Test_Button3" >
<input type ='button'  value = "Test Button 4" id="Test_Button4" >

Here is the javascript code

$('Test_Button1').click (function() {
    alert("Test Button 1 worked");
});


$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});


document.getElementById('Test_Button3').onclick = function() {
        alert("Test Button 3 worked");
};


$(document).ready (function () {
        $('Test_Button4').click (function() {
            alert("Test Button 4 worked");
    });
});

See this answer for some more info: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick/6348597#6348597 — Chris Baker, Mar 13 '13 at 01:33

score 2 · Answer 1 · answered Mar 13 '13 at 01:32

2

For the first one, since you are calling it as the id of the element you have to use #, so

$('#Test_Button1').click(function() {
        alert("Test Button 1 worked");
});

And the same thing for the last one, you have to add the #.

http://jsfiddle.net/ez2SP/1/

answered Mar 13 '13 at 01:32

Thanks everybody! My eyes were way too tired to see the missing '#'. Getting old sucks :) – fat fantasma Mar 13 '13 at 01:58

score 1 · Answer 2 · answered Mar 13 '13 at 01:34

1

Asumming that your $ is jQuery, then you are missing the # sign from #1 and #4

answered Mar 13 '13 at 01:34

OJay

4,763
3
26
47

score 1 · Answer 3 · answered Mar 13 '13 at 01:35

1

#1 and #4 look for <Test_Button4> elements. To get an element by its id attribute, you have to use a #:

#Test_Button4

answered Mar 13 '13 at 01:35

Blender

289,723
53
439
496

woz · Answer 4 · 2013-03-13T01:35:23.950

0

For #1, you need a #:

$('#Test_Button1').click (function() {
    alert("Test Button 1 worked");
});

Same for #4:

$('#Test_Button4').click (function() {
    alert("Test Button 4 worked");
});

jQuery use CSS-style selectors, which means if you are selecting an item by id, use #. If you are selecting it by class, use ..

There's more on that here: http://www.w3schools.com/jquery/jquery_ref_selectors.asp

edited Mar 13 '13 at 01:35

answered Mar 13 '13 at 01:33

woz

10,888
3
34
64

score 0 · Answer 5 · edited May 23 '17 at 10:32

As has been pointed out, some of your code is wrong, but I assume it is only for the sake of example. You would need to use $('#Test_Button1') (note the addition of the #) to access the button with the id Test_Button1.

Technically speaking, there are several ways to react to element events, and there are reasons to use most of them.

This code:

$(document).on("click","#Test_Button2", function() {
        alert("Test Button 2 worked");
});

... is using event delegation(read) through jQuery. Basically, instead of adding an event listener to each individual element, you add it to a parent element (in this case, the document itself). Because events bubble (read and read), when you click a button, the event eventually triggers the delegate listener. This is most useful if you'll be adding or changing content on the page (with AJAX, for example). New elements added to the page will trigger your event without having to individually deal with them, since the listener is actually attached to the document.

The code in the document.ready wrapper (itself an event listener) will be triggered when DOM is ready[doc]. The other code would execute as the document loads. You can wrap anything in a document.ready block, it doesn't represent a discrete method.

Several of the examples you show are the same thing. You can use on() to add a delegate, or you can use click() -- the latter is an alias of the former. You will also find live() in code out in the wild, that has been replaced by on() in a more recent version.

onclick is a property of the HTML element, it is the same as putting the event right inline: <button onclick="alert('do not do this');">Yay!</button>.

Please refer to this answer for a complete breakdown on the difference between adding an event listener versus using the element property onclick: addEventListener vs onclick

Documentation

jQuery.click - http://api.jquery.com/click/
jQuery.ready - http://api.jquery.com/ready/
element.onclick on MDN - https://developer.mozilla.org/en-US/docs/DOM/element.onclick
How JavaScript Event Delegation Works by David Walsh - http://davidwalsh.name/event-delegate
Advanced event registration models on quirksmode http://www.quirksmode.org/js/events_advanced.html
Event order on quirksmode http://www.quirksmode.org/js/events_order.html

How to use different methods to detect button clicks in Javascript?

5 Answers5