JQuery .addClass() not applying styles defined in JQuery

Question

It's quite a simple question, but I'm (trying) to write a JQuery plugin, and I want to use only JQuery. The problem is, I have some styles set for the .active divs (via JQuery), and on clicking a <div> it's given a class active - I know this, because I checked in the developer tools - but it's not given the styles. I tried hardcoding the class onto the <div>, and it worked fine. I also tried hardcoding the styles in CSS instead of JQuery, and again, it worked. Is there a way of updating the JQuery - onclick of the <div> - so that the styles are applied when the <div> is clicked?

$('div.active').css({
  'border-style':'solid',
 'border-width':'1px',
 'border-color':'black',
});
$('div').on('click',function(){
   $('div').removeClass('active');
    $(this).addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>

JSFiddle

Also, can you explain why this isn't working for me?

Thanks

https://stackoverflow.com/questions/1212500/create-a-css-rule-class-with-jquery-at-runtime — Peter, Jun 08 '17 at 20:31
It's not uncommon for a jQuery plugin to require a css file that it provides, in conjunction with the logic. If possible, let css do what it's good at and let javascript do what it's good at. — Taplar, Jun 08 '17 at 20:33

score 3 · Answer 1 · answered Jun 08 '17 at 20:30

3

$('div.active').css({
  'border-style':'solid',
    'border-width':'1px',
    'border-color':'black',
});

The above logic puts inline styles on any div element that has the active class, -at that point in time-, in the DOM.

$('div').on('click',function(){
    $('div').removeClass('active');
    $(this).addClass('active');
});

The above logic simply shifts around the active class on elements. It does not automatically move inline styles.

answered Jun 08 '17 at 20:30

Taplar

24,788
4
22
35

So... How can I fix that? Or is my only option a workaround? – James Douglas Jun 08 '17 at 20:44
If you don't want to continually remove inline styles from old things and put them on new things, which you should avoid, use a stylesheet instead. – Taplar Jun 08 '17 at 20:46

ssc-hrep3 · Accepted Answer · 2017-06-08T20:37:01.540

$('div.active') selects all <div> elements which have the class .active on them, in the exact time of its execution. This means, when the page is loaded, but there are no elements having the class .active on them when the page is loaded, so no element will be styled. The properties are not automatically added afterwards, when there is an element matching the previous selection.

If you want to add styles to your page, you need to add a <style> attribute to the DOM. You can do it like this:

$('head').append('<style>div.active { border: 1px solid black; }</style>');

I would, however, not add stylesheets programmatically. Try to add the styles to your stylesheet file and only switch classes to make changes programmatically.

Here is working example:

$('head').append('<style>div.active { border: 1px solid black; }</style>');
$('div').on('click',function(){
   $('div').removeClass('active');
    $(this).addClass('active');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1">div 1</div>
<div class="div2">div 2</div>
<div class="div3">div 3</div>
<div class="div4">div 4</div>

Tianyun Ling · Answer 3 · 2017-06-08T20:38:55.683

0

Aside explanation from others, put CSS seperately would work,

div.active {
    border: 1px solid red;
}

div {
    border: 1px solid green;
}

A working demo for your question is here: js fiddle

edited Jun 08 '17 at 20:38

answered Jun 08 '17 at 20:37

Tianyun Ling

1,045
1
9
24

JQuery .addClass() not applying styles defined in JQuery

3 Answers3