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