JQuery addClass on click

Question

I am trying to add class using JQuery to a button when it is clicked. The following codes show my class and JQuery onclick event with its handler:

CSS

.input-highlight {
     background-color: #1E90FF;
     color: white;
}

JS

$("#elv-geo").on("click", hightlight);

function hightlight() {

    var georgian = $("#geo-elv");

    georgian.addClass("input-highlight");

}

When I had "visibility: hidden" in the class, it did work, but with the above code, it doesn't. Any ideas why?

@Amit is there any benefit to wrapping highlight in an anonymous function instead of passing it directly? — John Dvorak
– John Dvorak, Commented Jun 27, 2013 at 11:38

Yotam Omer · Accepted Answer · 2013-06-27 11:33:48Z

1

You used once $("#geo-elv") and the other time $("#elv-geo"). This may cause your problem..

Also, you should consider using the following syntax:

$("#geo-elv").on('click',function(){
    $(this).addClass('input-highlight');
})

answered Jun 27, 2013 at 11:33

Yotam Omer

15.4k11 gold badges65 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Sudip Over a year ago

So what's the problem, he used one click ID and another for change class ID.

Yotam Omer Over a year ago

Didn't you read? "I am trying to add class using JQuery to a button when it is clicked"

Davit Over a year ago

Yotam, I did confuse id-s and although the class is added to that button when clicked (seen in browser inspect element), it doesn't do what the class says (change background color etc.). I tried using $(this) too, but no success.

Yotam Omer Over a year ago

Your css might be overridden by some other rules.. try background-color: #1E90FF !important; or changing the location of the rule in the page for it to work. also try to use the rule with the selector: #geo-elv.input-highlight which is more specific thus gets higher priority.

AntouanK · Accepted Answer · 2013-06-27 11:35:13Z

0

.input-highlight {
    background-color: #1E90FF;
    color: white;
}

var id = "#elv-geo"; // is it elv-geo or geo-elv?
$(id).on("click", highlight);

function highlight() {
    $(id).addClass("input-highlight");
}

answered Jun 27, 2013 at 11:35

AntouanK

5,0081 gold badge24 silver badges26 bronze badges

Collectives™ on Stack Overflow

JQuery addClass on click

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related