Run a javascript when an element has loaded into the HTML page

Question

I have a script that loads some HTML code into a <div id="nav"> element.

The div element is located in index.html.

The load script looks like this, and is run when the index.html is loaded.

$(document).ready(function () {
    $('#nav').load('nav.html');
});

nav.html contains the code that I want to load into the <div id="nav"> element

nav.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Nav</title>

<body>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Brand</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li id="nav_item_start"><a href="index.html">Start</a></li>
                <li id="nav_item_2"><a href="page2.html">page2</a></li>
                <li id="nav_item_3"><a href="page3.html">page3</a></li>
                <li id="nav_item_4"><a href="page4.html">page4</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <button type="button" class="btn btn-default navbar-btn" onclick="increaseFontSize()">Ändra kontrast</button>
                </li>
                <li>
                    <button id="nav_signin" type="button" class="btn btn-default navbar-btn"
                            onclick="location.href='signin.html'">Logga
                        in
                    </button>
                </li>
            </ul>
        </div>
    </div>
</nav>
</body>
</html>

I want a script to run after the nav.html code has been loaded into my div element. Is there a callback method for this, or any other standard approach to this problem?

This is my javascript that I want to run as stated above:

setTimeout(myFunction, 200);
function myFunction(){
    //Manipulating the nav.html code 
}

The problem with this approach is that it might take longer than 200 ms for the nav.html code to load, resulting in no effect of the script...

Any help here is greatly appreciated

Marcus

api.jquery.com/load of course there's a callback, $('#nav').load('nav.html', myFunction); — pawel
– pawel, Commented Nov 27, 2014 at 11:09

Rory McCrossan · Accepted Answer · 2014-11-27 11:09:06Z

2

The second parameter of the load() method is a callback function which will be executed after the AJAX request completes. Try this:

$('#nav').load('nav.html', function(){
    //Manipulating the nav.html code 
});

answered Nov 27, 2014 at 11:09

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

Run a javascript when an element has loaded into the HTML page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related