简体   繁体   English

jquery $(document).one('ready',function(){...}不起作用

[英]jquery $(document).one ('ready', function () {…} does not work

When using $(document).ready(function(){...}); 使用$(document).ready(function(){...}); (version 1), the document ready function fires indefinitely. (版本1),文档就绪函数无限期触发。 My guess is that the ready is fired everytime the jquery .load function finishes? 我的猜测是每当jquery .load函数完成时就会触发就绪? Would like to confirm. 想确认一下。

So I tried using jquery's $(document).one('ready', function(){...}); 所以我尝试使用jquery的$(document).one('ready', function(){...}); function (version 2), but the function doesn't fire at all. 功能(版本2),但功能根本不会触发。 What is wrong here? 这有什么不对?

index.html: 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 version 1: 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 version 2: 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();
});

$(document).ready() is implemented in a special way. $(document).ready()以特殊方式实现。 When it's used before the document is ready, it establishes a listener for the DOMReady event. 在文档准备好之前使用它时,它会为DOMReady事件建立一个监听器。 But if it's called again after the document is ready, it simply executes the code unconditionally, it doesn't wait for an event (because the DOMReady event only occurs once). 但是如果在文档准备好之后再次调用它,它只是无条件地执行代码,它不会等待事件(因为DOMReady事件只发生一次)。

ready isn't a real event, so .one() won't work with it. ready不是真正的事件,因此.one()将无法使用它。

There is no point to doing $(document).one ('ready',...) and that form is also deprecated. 没有必要做$(document).one ('ready',...)并且该表单也被弃用了。 The ready handler is only ever fired once anyway. 无论如何,就绪处理程序只会被触发一次。 Certainly if you reload your entire page, that creates a new document which will be loaded again. 当然,如果您重新加载整个页面,则会创建一个将再次加载的新文档。 But operations within a given document, do not trigger .ready() again. 但是给定文档中的操作不会再次触发.ready()

In addition, I believe I read somewhere that it is deprecated to use $(document).on('ready', ...) and that the proper forms are: 另外,我相信我在某个地方读到了不推荐使用$(document).on('ready', ...)并且正确的形式是:

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

Ahh, yes here's the note about the "ready" event using .on() being deprecated: 啊,是的,这是关于使用.on()弃用的“就绪”事件说明

There is also $(document).on("ready", handler) , deprecated as of jQuery 1.8 and removed in jQuery 3.0. 还有$(document).on("ready", handler) ,从jQuery 1.8开始不推荐使用,并在jQuery 3.0中删除。


If you really think that a ready handler is getting called multiple times, you need to show us exactly how that is happening because that is not supposed to be the case. 如果你真的认为现成的处理程序被多次调用,你需要准确地向我们展示它是如何发生的,因为事实并非如此。 In fact, inside the .ready() implementation a registered callback is permanently removed from the list as soon as it is called (thus forgetting about it forever) so it's hard to imagine how it could ever get called again (unless you double registered the same callback). 事实上,在.ready()实现中,一旦注册回调被调用就会从列表中永久删除(因此永远忘记它),所以很难想象如何再次调用它(除非你重新注册了同样的回调)。

Keep in mind that if you use .ready() after the document is already ready, it will just call the callback you supply right away. 请记住,如果您在文档准备就绪后使用.ready() ,它将立即调用您提供的回调。 That's how the .ready() functionality is defined. 这就是.ready()功能的定义方式。 So, if you're regularly reregistering .ready() handlers, they will keep getting called each time you register them (after the document is ready). 因此,如果您经常重新注册.ready()处理程序,则每次注册时都会调用它们(在文档准备好之后)。


FYI, if what you're trying to do is to figure out when newly loaded content is ready for us, then you should be using the callback that can be provided to .load() : 仅供参考,如果您要做的是确定新加载的内容何时为我们准备好,那么您应该使用可以提供给.load()的回调:

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM