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!

As many people pointed out, the rendered ID of your button won't be "Button". However, you can still reference it by ID instead of class (jquery selectors perform better on IDs than classes), by doing this: $("#<%= Button.ClientID %>") — mikemanne, Aug 25 '10 at 18:56

score 50 · Accepted Answer · edited Jun 08 '13 at 14:41

50

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

edited Jun 08 '13 at 14:41

Chris Bier

14,183
17
67
103

answered Aug 25 '10 at 14:25

Nick Craver

623,446
136
1,297
1,155

in your first example, would I actually be able to use "this" to pass the button as an argument to the function? Wouldn't I need to do some casting or is all that handled? – Phil Aug 25 '10 at 14:46
@Phil - Yes you can pass `this` in the first example, it's a DOM element, that's all that's needed :) I do urge you to use an unobtrusive option here like the second half of the answer though, it's much easier to maintain. – Nick Craver Aug 25 '10 at 14:49
1

@Nick - I will certainly try, but I'm really not comfortable with jQuery syntax yet.. I really should read up on it. Like in your example; if the button's classes are: CssClass="button horizontal floating" how would I target that? – Phil Aug 25 '10 at 14:52
1

@Phil - You could use any of them you wanted, for example `$(".button")` would work, or `$(".horizontal")` or a combination `$(".button.floating")` would only match an element with *both* classes. I would go here and click tutorials: http://docs.jquery.com/Main_Page (their database *just* started erroring, it should be fixed shortly). – Nick Craver Aug 25 '10 at 14:55
@Phil - Update, the site issues have been resolved, check out the selector tutorial here: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery#Find_me:_Using_selectors_and_events – Nick Craver Aug 25 '10 at 16:02

score 12 · Answer 2 · answered Aug 25 '10 at 14:26

12

Using jQuery:

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

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

answered Aug 25 '10 at 14:26

Benjamin Wohlwend

30,958
11
90
100

The problem with this approach is that the element ID isn't guaranteed to be `Button`, it usually isn't. – Nick Craver Aug 25 '10 at 14:27
Well, you can only work with what the question gives you. I'm sure Phil is bright enough to look up the jQuery selector docs and find himself a nice selector apt for the job. – Benjamin Wohlwend Aug 25 '10 at 14:43
The question does give you what's needed, the markup is ASP.Net markup :) – Nick Craver Aug 25 '10 at 14:52

score 4 · Answer 3 · answered Aug 25 '10 at 14:29

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

should do the trick. unless you're loading the button with ajax. In which case you could do:

$('#Button').live('click', function() {...

Also remember not to use the same id more than once in your html code.

kevtrout · Answer 4 · 2013-05-13T20:08:55.197

1

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

edited May 13 '13 at 20:08

answered Aug 25 '10 at 14:27

kevtrout

4,934
6
33
33

score 0 · Answer 5 · edited May 07 '17 at 21:15

0

Try to make your css more specific so that the new (green) style is more specific than the previous one, so that it worked for me!

For example, you might use in css:

button:active {/*your style here*/}

Instead of (probably not working):

.active {/*style*/} (.active is not a pseudo-class)

Hope it helps!

edited May 07 '17 at 21:15

JSON_Derulo

892
2
14
39

answered May 27 '13 at 08:53

viridis

177
10

jQuery addClass onClick

5 Answers5

Linked