jQuery函数仅在.ready内部起作用

问题描述

| 我仍然对jQuery还是陌生的，我想知道在.ready（）内部调用的jQuery函数如何正常工作而在外部却不能正常工作？ 例如，这将起作用：

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

但这不会：

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

    

解决方法

        它的工作方式和作用方式取决于HTML中脚本和元素的排列顺序，还可能会受到控件外部参数的影响（例如，浏览器的编程行为）。 我猜想这个脚本会在您的页面中出现在添加了点击处理程序的带有ѭ2的元素之前；这导致脚本运行，并且在文档树中尚未找到此类元素（尚未）。在脚本运行后添加该元素，这就是为什么jQuery在整个文档加载后都发现它很好的原因。 如果将脚本移到页面的最后，它应该可以工作（尽管正确的解决方案是使用文档就绪事件，如第一个代码片段中所示）。     ,        在完全解析文档并构造DOM之前，您无法访问DOM。这包括修改任何元素，例如

#field1

和

#result

。 由于

$(document).ready(..)

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

$(onReadyFunction)

，即

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

顺便说一下，jQuery在这里没有什么神奇之处：它只是在DOM树的解析和构造触发

DOMContentLoaded

（或等效）事件时注册要调用的函数。     ,        在创建dom树后，将执行ready函数。您在第二段代码中出错，因为尚未创建ID为filed1的dom树元素，即该页面尚未加载。