通过ajax加载的Javascript无法在以后的脚本块中调用函数

Question

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

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

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

源代码

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，然后会显示错误消息。

错误消息

Opera 12.11：

  

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

Chrome 23.0.1271.97 m：

  

未捕获的ReferenceError：R未定义

IE 9：

  

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

Answer 1

在2.html $（document）.ready中因为dom已经构建而立即触发，此时还没有到达包含R的脚本块，因此没有定义R.在1.html中，整个页面在$（document）.ready之前加载，因此C得到定义。