In JQuery, how to pass the element that was clicked to the method that is called on onclick event

Question

I have several of these lines on a page:

<div class="save-button" onclick="Save()">Save</div> 

In my Save() method I want to manipulate the div that was clicked to call the Save() method. How do I pass that in (I think $(this) ), without resorting to ids?

Many thanks!

Answer 1

Either remove the save() and use click() to catch the event:

<div class="save-button">Save</div> <script> $('.save-button').click(function () {     // Now the div itself as an object is $(this)     $(this).text('Saved').css('background', 'yellow'); }); </script> 

^{[ View output ]}

Or if you insists on using such function as save():

<div onClick="save(this)">Save</div> <script> $(function () {     save = function (elm) {         // Now the object is $(elm)         $(elm).text('Saved').css('background', 'yellow');     }; }); </script> 

^{[ View output ]}

EDIT (2015): .on('click', function)

<div class="save-button">Save</div> <script> $('.save-button').on('click', function () {     // Now the div itself as an object is $(this)     $(this).text('Saved').css('background', 'yellow'); }); </script> 

Answer 2

Inside the event handler, this refers to the clicked element. However, inside the function you call from the event handler, which is Save, this will refer to window.

You can explicitly set what this should refer to inside Save via call ^[MDN] (or apply):

onclick="Save.call(this, event || window.event);" 

then you can use it inside the function as $(this):

function Save(event) {     // `this` refers to the clicked element     // `$(this)` is a jQuery object     // `event` is the Event object }; 

But as you are using jQuery, you really should do

$('.save-button').click(Save); 

to bind the event handler. Mixing markup with logic is not a good style. You should separate the presentation from the application logic.

Or if you want Save to accept an element as parameter, then just pass it:

onclick="Save(this);" 

and with jQuery:

$('.save-button').click(function() {     Save(this); });