jQuery Button Click 'this'

Question

Say we have a simple event button handler:

$( \"#aButton\" ).click(function() {
   console.log( \"tile\" + this.val() + \"clicked\" );
});

I re

Answer 1

Use $(this) to obtain the clicked element.

$("#aButton").click(function() {
    console.log("tile " + $(this).val() + " clicked");
});

In addition, you can note that $(this)[0] === this

this should can be used when using built in JavaScript methods, such as .addEventListener(). Using this in this context will return the Node that triggered the event.

Answer 2

The object that you clicked can be referred by this, so saying this.id will give you button's id "aButton". However, if you want to use jQuery's methods then you have to say $(this).attr('id') which will again give you "aButton". So you do have different mechanisms available to you but if you are using jQuery, it is preferable to use jQuery methods.

Answer 3

this is the raw DOM element. You have to wrap it in a jQuery object if you want to use jQuery functions on it.

console.log( "tile" + $(this).val() + "clicked" );
//                    ^^^^^^^^^^^^^

Inputs have a property called value that does the same. So you can use it on raw DOM inputs like this:

console.log( "tile" + this.value + "clicked" );
//                    ^^^^^^^^^^