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
1 answers
solution1
2 ACCPTED 2014-11-27 11:09:06
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
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.