Question

使用$(document).ready(function(){...});（版本1）时，文档就绪功能将无限期触发。我的猜测是每当jquery .load函数完成时就会触发就绪？想确认。

所以我尝试使用jquery＆＃39; $(document).one('ready', function(){...});函数（版本2），但该功能根本没有启动。这有什么不对？

的index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/vendor/jquery/jquery-3.1.0.min.js"></script>
    <script src="/js/index.js"></script>
</head>
<body>
    <div class="index__header"></div>
    <div class="index__content"></div>
</body>
</html>

index.js版本1：

var _index = {
    loadLogin : function () {
        $(".index__content").load("/view/login.html");
    }
};

$(document).ready ( function () {
    $(".index__header").load("/view/header.html");
    _index.loadLogin();
});

index.js第2版：

var _index = {
    loadLogin : function () {
        $(".index__content").load("/view/login.html");
    }
};

$(document).one ('ready', function () {
    console.log('ready...');
    $(".index__header").load("/view/header.html");
    _index.loadLogin();
});

Answer 1

$(document).ready()以特殊方式实施。在文档准备好之前使用它时，它会为DOMReady事件建立一个监听器。但是如果在文档准备好之后再次调用它，它只是无条件地执行代码，它不会等待事件（因为DOMReady事件只发生一次）。

ready不是一个真实的事件，因此.one()无法使用它。

Answer 2

执行$(document).one ('ready',...)没有意义，并且该表单也已弃用。无论如何，就绪处理程序只会被触发一次。当然，如果您重新加载整个页面，则会创建一个将再次加载的新文档。但是，给定文档中的操作不会再次触发.ready()。

此外，我相信我在某个地方读过不推荐使用$(document).on('ready', ...)并且正确的形式是：

$(document).ready(...)
$(function() {...})

啊，是的，note about the "ready" event使用.on()被弃用了：

还有$(document).on("ready", handler)，已弃用 jQuery 1.8并在jQuery 3.0中删除。

如果你真的认为现成的处理程序被多次调用，你需要准确地告诉我们这是怎么回事，因为事实并非如此。实际上，在.ready()实现中，一旦注册回调被调用就会从列表中永久删除（因此永远忘记它），因此很难想象如何再次调用它（除非你重复注册相同的回调）。

请注意，如果您在文档准备就绪后使用.ready()，它只会立即调用您提供的回调。这就是.ready()功能的定义方式。因此，如果您定期重新注册.ready()处理程序，则每次注册时都会调用它们（在文档准备好之后）。

仅供参考，如果您尝试做的是确定新加载的内容何时为我们准备好，那么您应该使用可以提供给.load()的回调：

$(".index__header").load("/view/header.html", function() {
    // newly loaded content is ready now
});

jquery $（document）.one（＆＃39; ready＆＃39;，function（）{...}不起作用

2 个答案: