Question

我刚刚开始使用jQuery，并希望每次页面加载时使用$（document）.ready（）动态生成一些HTML。当我使用像这样的内联JavaScript代码时它工作正常（这个例子显然已经简化，但它显示了问题的行为）：

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <script type="text/javascript">
        $(document).ready(function(){
            $("#container").html("<p>Hello world</p>");
        });
    </script>
    <title>Test</title>
</head>
<body>
    <div id="container"></div>
</body>
</html>

但是，如果我链接到外部JavaScript文件并用以下内容替换内联JavaScript：

$(document).ready(start());

开始的代码是

function start(){

$("#container").html("<p>Hello world</p>");

}

没有任何反应。我在外部start（）函数中放了一个警告框，它弹出正常，因此函数内部的代码正在执行。控制台也不会显示任何错误。但是，如果我替换

$("#container").html("<p>Hello world</p>");

带

document.getElementById("container").innerHTML = "<p>Hello world</p>";

控制台发出错误，说document.getElementById（“container”）为null。

如果有人能指出我正确的方向，我真的很感激。

Answer 1

这部分代码：

$(document).ready(start());

应该是：

$(document).ready(start);

因此，在第一个示例中，您在文档准备好之前立即调用start()并将其返回值传递给$(document).ready()，这不是您想要的。

在第二个示例中，您将对start()函数的引用传递给$(document).ready()，稍后当文档准备就绪时它将调用start()函数，这是您想要的

Answer 2

将$(document).ready(start());更改为$(document).ready(start);。

$（document）.ready（）在用于从外部javascript文件调用函数时表现不同

2 个答案: