jQuery addClass onClick

Question

The setting is easy; I want to be able to add a class to (in this case) a button when onClick-event is fired. My problem is that I haven't found a way to pass the button itself as the parameter to the function. I'd like to do something like:

<asp:Button ID="Button" runat="server" onclick="addClassByClick(this)"/> 

And then a javaScript function something like this:

function addClassByClick(button){     button.addClass("active") } 

I know I've got a lot of errors here, but that's why I'm posting. I've tried different scenarios with jQuery and without jQuery but I always end up with a broken solution (clicks suddenly stop coming through, class not added etc etc) so I decided to ask the pro's.

Any suggestion to what I can try? Thanks for reading editand all the help!

Answer 1

It needs to be a jQuery element to use .addClass(), so it needs to be wrapped in $() like this:

function addClassByClick(button){   $(button).addClass("active") } 

---

A better overall solution would be unobtrusive script, for example:

<asp:Button ID="Button" runat="server" class="clickable"/> 

Then in jquery:

$(function() {                       //run when the DOM is ready   $(".clickable").click(function() {  //use a class, since your ID gets mangled     $(this).addClass("active");      //add the class to the clicked element   }); }); 

Answer 2

Using jQuery:

$('#Button').click(function(){     $(this).addClass("active"); }); 

This way, you don't have to pollute your HTML markup with onclick handlers.