Javascript jQuery函数只在.ready（）内部工作

我对jQuery还是个新手，我想知道为什么调用inner.ready（）的jQuery函数可以正常工作，但不能在外部工作

例如，这将起作用：

$(document).ready(function() {
    $('#field1').click(function() {
        $('#result').load('/random_post #post');
    });
});

但这不会：

$('#field1').click(function() {
    $('#result').load('/random_post #post');
});

---

创建dom树后，将执行ready函数。第二段代码中出现错误，因为id为filed1的dom树元素尚未创建，即页面尚未加载。

在完全解析文档并构建dom之前，您无法访问dom。这包括修改任何元素，例如

#field1

和

#result

由于

$（document）.ready（..）

很长，可能很难记住，因此您也可以使用缩写形式

$（onReadyFunction）

，即

$(function() {
    $('#field1').click(function() {
        $('#result').load('/random_post #post');
    });
});

---

顺便说一句，jQuery在这里并没有什么神奇之处：它只是注册了当解析和构造DOM树触发

DOMContentLoaded

（或等效）事件时要调用的函数。

它如何工作以及是否工作取决于HTML中脚本和元素的排列顺序，它还可能受到您无法控制的参数的影响（例如，浏览器的编程方式）

我猜这个脚本会出现在页面中添加了点击处理程序的

id=“field1”

元素之前；这会导致脚本运行并在文档树中找不到这样的元素（尚未找到）。该元素是在脚本运行后添加的，这就是为什么jQuery在加载整个文档后发现它很好

如果在页面的最后移动此脚本，它应该可以工作（当然正确的解决方案是使用document ready事件，就像在第一个代码片段中一样）。

解释了原因。