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. — freedomn-m, Sep 19 '16 at 10:08

score 5 · Answer 1 · answered Sep 19 '16 at 10:07

5

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 '16 at 10:07

Pete

57,112
28
117
166

score 3 · Answer 2 · edited May 23 '17 at 12:16

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 '17 at 12:16

Community

1
1

answered Sep 19 '16 at 10:07

Jamiec

133,658
13
134
193

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

2 Answers2