How can I add a class with jquery once dynamic loading is finished?

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>

Do you install some plugin like activeX control and after that you want to add? — Adil
– Adil, Commented Apr 22, 2012 at 11:31
No its wordpress and a plugin loads, and after that I want to add, but its a similar thing — Claire
– Claire, Commented Apr 22, 2012 at 11:32
The .on() method attaches event handlers to the currently selected set of elements but you have to check if document controls are ready to use and that you get in ready method — Adil
– Adil, Commented Apr 22, 2012 at 11:38

iambriansreed · Accepted Answer · 2012-04-22 13:23:01Z

2

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.

edited Apr 22, 2012 at 13:23

answered Apr 22, 2012 at 13:06

iambriansreed

22.3k6 gold badges66 silver badges81 bronze badges

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

3 Comments

ValeriiVasin Over a year ago

I suppose that plugin should have some callback for this action.

Petr Peller Over a year ago

Isn't there any jQuery event that could be used instead of setInterval?

iambriansreed Over a year ago

@PetrPeller There could be a onload callback for the plugin mentioned but without knowing that an interval is the only other option.

ValeriiVasin · Accepted Answer · 2012-04-22 11:29:15Z

-1

You should wait until DOM is ready.

$(function () {
  $(element).addClass('hello');
});

answered Apr 22, 2012 at 11:29

ValeriiVasin

8,73611 gold badges60 silver badges79 bronze badges

1 Comment

Claire Over a year ago

that doesn't work because the element hasn't been added as normal, it's done with jquery so I think as far as jQuery knows, it's done, when it's isn't. If that makes sense...

Collectives™ on Stack Overflow

How can I add a class with jquery once dynamic loading is finished?

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related