Problem with Jquery addClass

Question

I am having trouble implementing the jQuery .addClass() effect.

The script I am trying to use looks like this:

<script>
    $(function(){   
        $('#top_right_size_large').click(function(){
            $('#primary').addClass('large_content');
        });
    });
    </script>

I've looked at the documentation and checked all of my parenthesizes but for whatever reason this doesn't add the .large_content class when the #top_right_size_large anchor is clicked. Any ideas why this wouldn't work the way I expect it to?

How do you know it is not added? Did you have a look at the DOM? Do the elements with ID primary or top_right_size_large exists? Your code works fine: jsfiddle.net/fkling/wcTz5 so I assume your HTML is not correct or adding the class just does not change anything visually. — Felix Kling
– Felix Kling, Commented Apr 29, 2011 at 7:51
Yeah, they all exist - there aren't any typos. I know its not getting added because I am watching with firebug. Plus, there aren't any of the styles associated with that class being applied. — Thomas
– Thomas, Commented Apr 29, 2011 at 7:52
See my edit. Your code works fine: jsfiddle.net/fkling/wcTz5 Could you provide a link to the page? Or post the HTML? — Felix Kling
– Felix Kling, Commented Apr 29, 2011 at 7:54

Volkan Ceylan · Accepted Answer · 2011-04-29 07:55:00Z

1

Just a guess, your anchor has an href and when clicked, it reloads the page, try changing code like below:

<script>
    $(function(){   
        $('#top_right_size_large').click(function(e) {
            e.preventDefault();
            $('#primary').addClass('large_content');
        });
    });
</script>

answered Apr 29, 2011 at 7:55

Volkan Ceylan

1,49613 silver badges15 bronze badges

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

2 Comments

Thomas Over a year ago

Thats a good guess, I always forget to change the href thing.

Felix Kling Over a year ago

@Thomas: Even better: If you don't use the link as link, meaning it does not refer to another site, use a button.

Thomas · Accepted Answer · 2011-04-29 07:58:06Z

0

Apparently, by adding the code before the tag, the script wouldn't work. I moved the code below the tag and everything works fine. Thanks for all the suggestions!

answered Apr 29, 2011 at 7:58

Thomas

5,09921 gold badges71 silver badges101 bronze badges

3 Comments

Felix Kling Over a year ago

It should work, because you are passing a callback to the document.ready event. I.e. the code is run after the DOM is loaded. Or maybe this is not the code you have? In my jsfiddle example you can see that the code is added to the head of the page (i.e. before the elements) and it works.

Thomas Over a year ago

I didn't use document.ready - thats why it needed to be loaded after the content. Thanks for helping me flush it out.

Felix Kling Over a year ago

Well, in your code you do. $(function(){...}) is a shortcut for $(document).ready(function(){...}). But anyway....

Bill the Lizard · Accepted Answer · 2011-06-22 20:17:41Z

0

Include javascript:void(0); in your href to prevent any navigation

<a id="op_right_size_large" href="JAVASCRIPT:VOID(0);">..</a>

edited Jun 22, 2011 at 20:17

Bill the Lizard

407k213 gold badges579 silver badges892 bronze badges

answered Apr 29, 2011 at 8:35

Atticus

6,75211 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Problem with Jquery addClass

3 Answers 3

2 Comments

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Related