How can I detect a css class added dynamically

Question

I have an html element in which we add a css class dynamically after a while of loading the main page. When i try in JQuery to detect if this element has the added class, the hasClass method return false.I suggest that is because the element has been dynamically added .

My code it is inserted inside the $(document).ready(function() {});.

Javascript:

!$('#travel-1_1_').hasClass('complete');

HTML:

<rect id="travel-1_1_" width="64" height="12.6" y="28.5" x="48" class="complete"></rect>

The ID in the javascript is `#travel-2_1_` but the ID in the HTML is `#travel-1_1_` — J. Chen, Jul 26 '17 at 15:07
Chances are the element and/or class is added **after** your script has run. — DarthJDG, Jul 26 '17 at 15:13
What about event listening? I think [this](https://stackoverflow.com/questions/10612024/event-trigger-on-class-change) is going to help you. — pacanga, Jul 26 '17 at 15:19
@DarthJDG Maybe i should load the javascript in the end of the page — KubiRoazhon, Jul 26 '17 at 15:20
You can check https://stackoverflow.com/questions/4561845/firing-event-on-dom-attribute-change — Uday Sravan K, Jul 26 '17 at 15:20
Possible duplicate of [How to detect class changing by DOMAttrModified](https://stackoverflow.com/questions/17172470/how-to-detect-class-changing-by-domattrmodified). Other than MutationObserver (see answer of the other question) there is no way to trigger an event on class change. — tao, Jul 26 '17 at 15:46
How about you run the function when your code adds the class? — Heretic Monkey, Jul 26 '17 at 16:11

score 2 · Accepted Answer · answered Jul 26 '17 at 15:18

2

You need to make your function run at an interval after the page has loaded. Here's one option:

function fn60sec() {
// runs every 60 sec and runs on init.
$('#travel-1_1_').hasClass('complete');
}
fn60sec();
setInterval(fn60sec, 60*1000);

answered Jul 26 '17 at 15:18

Emma Earl Kent

498
5
12

1

The least you could do is remove the interval when the condition is met. – tao Jul 26 '17 at 15:58

score 1 · Answer 2 · answered Jul 27 '17 at 15:00

My first suggestion would be to just call whatever function you need when you add the class. In the case that you don't control the code adding the class though I think the best thing to do would be to set an Interval listener.

var classListener = setInterval(function(){
    if($('#travel-1_1_').hasClass('complete')){
        clearInterval(classListener);
        //Do your work here or
        doWorkFunctionCall();
    }
}, 1000);

The unit for the interval is milliseconds, so this will run every second. if you want it to take longer just multiply it by how many seconds you want it to wait before checking. The advantage to this solution is that it will stop running once it finds that the element has the class.

score 0 · Answer 3 · answered Jul 26 '17 at 15:17

0

You might need to make that check in the same place where you set the class to make sure that it only gets executed afterwards

answered Jul 26 '17 at 15:17

João Serra

509
9
21

score 0 · Answer 4 · answered Jul 26 '17 at 15:17

0

Where are you checking if the class exists?

According to this answer, you should be able to just check it inside the $(document).ready() function.

answered Jul 26 '17 at 15:17

sej

61
1
7

How can I detect a css class added dynamically

4 Answers4