add Class after window.load to html element added by .load not working

Question

I am loading a header with navigation menu using

jQuery(document).ready(function() {
    $('#header').load("header.html");
});

and after this code I have the following

$(window).load(function() {
   $('#about').addClass('active');
});

from everything I understand, the window.load runs after document.ready, but it's still not applying anything. Any help? The jquery for addClass seems correct as when typed into a console after loading up the page in a browser, it works.

Is this a problem with the way I have set up my header template and loading it?

Previously I worked with php and some node.js, so re-using code was straightforward but I have a requirement to use pure html/js, hence the header template.

thanks

.load event does not fire on $().load - they might have the same name, but they're very different actions. — fdomn-m
– fdomn-m, Commented Sep 19, 2016 at 10:08

Pete · Accepted Answer · 2016-09-19 10:07:36Z

6

Try doing it in the load call back instead:

$('#header').load("header.html", function () {
   // this is run after header.html has been loaded
   $('#about').addClass('active');
});

More information about .load

answered Sep 19, 2016 at 10:07

Pete

58.8k31 gold badges132 silver badges188 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:16:21Z

3

You want to pass a callback to load which should run after the content has loaded

jQuery(document).ready(function() {
    $('#header').load("header.html", function(){
       $('#about').addClass('active');
    });
});

To understand the differences between document ready and window load check this: window.onload vs $(document).ready()

edited May 23, 2017 at 12:16

CommunityBot

11 silver badge

answered Sep 19, 2016 at 10:07

Jamiec

136k15 gold badges143 silver badges202 bronze badges

Collectives™ on Stack Overflow

add Class after window.load to html element added by .load not working

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related