当元素已加载到HTML页面中时运行javascript

Question

I have a script that loads some HTML code into a <div id="nav"> element. 我有一个脚本，可将一些HTML代码加载到<div id="nav">元素中。

The div element is located in index.html. div元素位于index.html中。

The load script looks like this, and is run when the index.html is loaded. 加载脚本如下所示，并在加载index.html时运行。

$(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包含要加载到<div id="nav">元素中的代码

nav.html: 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. 我希望在将nav.html代码加载到div元素后运行脚本。 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: 这是我要如上所述运行的JavaScript：

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... 这种方法的问题在于，nav.html代码的加载可能需要200毫秒以上的时间，从而导致脚本无效。

Any help here is greatly appreciated 非常感谢这里的任何帮助

Marcus 马库斯

Answer 1

The second parameter of the load() method is a callback function which will be executed after the AJAX request completes. load()方法的第二个参数是一个回调函数，它将在AJAX请求完成后执行。 Try this: 尝试这个：

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

当元素已加载到HTML页面中时运行javascript

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-11-27 11:09:06

当元素已加载到HTML页面中时运行javascript

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-11-27 11:09:06

解决方案1
2 已采纳 2014-11-27 11:09:06