1

我有 2 个 HTML 文件，1.html和2.html。

  • 1是主页，它通过 ajax 加载2并将其内容填充到div.
  • 在1中，有 3 个脚本块 - A、B和C。
    • $(document).ready()in 块B调用块C中的函数。
    • 没有错误。
  • 在2中，有 3 个脚本块 - P、Q和R。
    • $(document).ready()in 块Q调用块R中的函数。
    • 它给出了一个错误。

似乎当通过 ajax 加载某些 Javascript 时，它无法调用稍后（但不是更早）出现在同一文件中的脚本块中的函数。为什么？这是预期的行为吗？

源代码

1.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<!-- Script block A -->
<script type='text/javascript'>
    function A() {alert('A');}
</script>

<div>x</div>

<!-- Script block B -->
<script type='text/javascript'>
    $(function() {
        A(); B(); C();

        $("#ajax_load_result").load("2.html");
    });

    function B() {alert('B');}
</script>

<div>x</div>

<!-- Script block C -->
<script type='text/javascript'>
    function C() {alert('C');}
</script>

<div id='ajax_load_result'>y</div>

2.html

<div>x</div>

<!-- Script block P -->
<script type='text/javascript'>
    function P() {alert('P');}
</script>

<div>x</div>

<!-- Script block Q -->
<script type='text/javascript'>
    $(function() {
        P(); Q(); R();
    });

    function Q() {alert('Q');}
</script>

<div>x</div>

<!-- Script block R -->
<script type='text/javascript'>
    function R() {alert('R');}
</script>

<div>x</div>

输出

它会警告A, B, C, P, Q，然后给出错误消息。

错误信息

歌剧 12.11：

未处理的错误：未定义的变量：R

铬 23.0.1271.97 米：

未捕获的 ReferenceError：未定义 R

即 9：

SCRIPT5007：属性“R”的值为 null 或未定义，而不是 Function 对象

4

1 回答 1

2

在 2.html 中 $(document).ready 立即触发，因为 dom 已经构建，此时尚未到达包含 R 的脚本块，因此未定义 R。在 1.html 中，整个页面在 $(document).ready 之前加载，因此 C 被定义。

于 2012-12-18T02:07:12.300 回答