using addClass or toggleClass with JQuery inside a click method does not work? bug?

Question

This seems very simple.. and still it does not work correctly.

I got it working if you put the class .normal above the .hightlight.. but i don't alter the style here.. only the position. This does not make any sense..

I can't seem to paste the html code in here, so i have to do it in blocks. And I enclosed a snapshot of all the code.

Make sure you have an empty html page. The doctype does not matter.. I tested it on different doctypes, but it still does not work correctly.

This is inside the style blok after the header

.highlight { color:black; background-color:yellow; }
.normal {  color:white; background-color: blue; }

after this I have a script tag with a source of the latest jquery code http://code.jquery.com/jquery-latest.min.js

And after this a script blok and in here goes:

$(document).ready(function () {
  $('#maindiv').css('cursor', 'pointer');
  $('#maindiv').click(function () {
    //alert("click");
   // $(this).toggleClass("highlight"); //this does not work!
   // $(this).addClass('highlight'); //this does not work!

   // $(this).attr("class", "highlight"); //this works
   // $(this).css("background", "yellow"); this works

    // the javascript way to do this works also fine.
    // var element = document.getElementById('maindiv');
    // element.setAttribute("class", "highlight");
});

});

And inside the body a p tag with an idname of "maindiv" and a class "normal"

with text click here.

Oke, I can't wait until someone try this too.. it's crazy, because all other way's work. But only the .addClass and .toggleClass don't work correctly

Because I am an new user I can't enclose the snapshot of the complete code in here, but you can download it at: http://www.bckan.nl/temp/jquerybug.jpg

May be you have another class which is override the new class. Check your html using firebug to see the class added or not. — Jayantha Lal Sirisena, Mar 04 '12 at 18:05
Try removing the class .normal too... that could be interfering. Generally when you assign classes to elements they take the properties in the order they come in the CSS definition. As normal comes AFTER highlight in your CSS definition it could be that normal is overriding the new highlight class. Another thing you could do is add !important to the highlight class e.g. `.highlight { color: black !important; background-color: yellow !important; }` — Thomas Clayson, Mar 04 '12 at 18:05
Using ninja's code here is a fiddle and working fine. http://jsfiddle.net/cWQrH/ — The Alpha, Mar 04 '12 at 18:19

score 2 · Answer 1 · answered Mar 04 '12 at 18:07

As the name says, addClass and toggleClass just add the class, which means that your element has still .normal which may take a higher priority than .highlight and thus, your color changes don't apply. Check the DOM and you'll see that the class is added. Try replacing .normal with .highlight instead of just adding .highlight or place .normal over .highlight in your CSS. You also could add !important to the properties of .highlight, but this is not recommended.

ninja · Answer 2 · 2012-03-04T18:16:16.410

Try:

$(document).ready(function () {
    $('#maindiv').css('cursor', 'pointer');
    $('#maindiv').on('click', function() {
        $(this).toggleClass("highlight").toggleClass('normal');
    });
});

Didn't try your code, but I'm assuming it adds the class fine, but since you never remove the "normal" class the css won't be overwritten.

Also for optimizations sake, try to keep .css to minimum in your javascript. setting maindivs cursor to pointer could just as easily be set in the .css file. And avoid .click / .live / .bind etc, they are deprecated and all of them link to the new .on function. So just use .on directly instead.

Oh, and adding !imporant in your css will work, but this is also something you should try to avoid as much as possible, will just make it harder for you later.

Great! Thanks for testing it and thanks for the advice! I wish I could give you guys some points, but I am new so don't have this feature yet. — chriscross, Mar 06 '12 at 13:11

using addClass or toggleClass with JQuery inside a click method does not work? bug?

2 Answers2