Question

I need to add a class to an <a> that is added programmatically. When I call addClass it doesn’t add it, this is I assume because the plugin hasn’t finished installing all it’s bits and pieces so the anchor isn’t there yet.

The page is here. It’s the login bar at the top. I want to add a class to the login and sign up buttons e.g.

jQuery('.bp-login a').addClass('simplemodal-login');
jQuery('.bp-signup a').addClass('simplemodal-register');

The HTML for that section is

<ul class="main-nav">
<li class="bp-login no-arrow">
    <a href="http://nicolaelvin.com/community/wp-login.php?redirect_to=http%3A%2F%2Fnicolaelvin.com%2Fcommunity">Log In
    </a>
</li>
<li class="bp-signup no-arrow">
     <a href="http://nicolaelvin.com/community/register/">Sign Up
     </a>
</li>
...</ul>

Answer 1

Try:

jQuery(function() {

    var modal_check = setInterval(function(){

        if(jQuery('.simplemodal-login').length > 1){
            clearInterval(modal_check);
            jQuery('.bp-login a').addClass('simplemodal-login');
            jQuery('.bp-signup a').addClass('simplemodal-register');
        }

    },100);

});​

This waits until the dom is ready then checks every 10th of a second to see if the modal plugin has loaded. Once the plugin has loaded it stops the interval and adds the class.