Q:

Javascript - conditional formatting breaks after element reload using ".load"

I'm very new to JavaScript / JQuery and having some issues with what should be a simple conditional formatting function.  The conditional formatting function itself works fine, on initial page load; however, after performing an element reload set to run every 60 seconds, it breaks the conditional formatting again.
Here's the JavaScript:
$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
}, 60000);

It's probably worth mentioning that it's only the ticker-item formatting that's going wrong after the element reload.  The carousel-item formatting works fine.  The ticker-items are inside the #top-bar element, whereas the carousel-items are not, so to me it's clear that the issue is within the #top-bar element as a result of the reload.
I've also tried the below code, to no avail:
$(document).ready(function(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');    
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
    });

var refreshTickers = setInterval(function () {
    $("#top-bar").load(location.href+" #top-bar>*","");
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
}, 60000);

What's more strange is that with this code, if I change the interval for the reload to 10 seconds, it seems to break the formatting for a few seconds but then fix it again, almost as though it is waiting for the rest of the function to execute before catching up with itself.
As I said, I'm new to JS and I've searched everywhere for a solution to this.  Am I doing something wrong?
If you need anything else (i.e. HTML), please let me know.
Thanks in advance for your help.

A:

if you want it to be done again and again you should create a separate function to that.
And the load function will trigger a callback whenever it completes you can use that callback to reformat it again.

function reFormat(){
    $('.ticker-item:contains("-")').css('color', 'red');
    $('.ticker-item:contains("+")').css('color', '#2FA702');
    $('.carousel-item h3:contains("Closed")').css('color', 'red');
    $('.carousel-item h3:contains("Open")').css('color', '#2FA702');
}

$(document).ready(function(){
   reFormat();

    var refreshTickers = setInterval(function () {
        $("#top-bar").load(location.href+" #top-bar>*", function(){
            reFormat();
        });
    }, 60000);
});

