Menu
When using $(document).ready(function(){...}); (version 1), the document ready function fires indefinitely. My guess is that the ready is fired everytime the jquery .load function finishes? Would like to confirm.
So I tried using jquery's $(document).one('ready', function(){...}); function (version 2), but the function doesn't fire at all. What is wrong here?
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:
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:
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();
});
494
$(document).ready() is implemented in a special way. When it's used before the document is ready, it establishes a listener for the DOMReady event. 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).
ready isn't a real event, so .one() won't work with it.
118
There is no point to doing $(document).one ('ready',...) and that form is also deprecated. 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.
In addition, I believe I read somewhere that it is deprecated to use $(document).on('ready', ...) and that the proper forms are:
$(document).ready(...)
$(function() {...})
Ahh, yes here's the note about the "ready" event using .on() being deprecated:
There is also
$(document).on("ready", handler), deprecated as of jQuery 1.8 and removed in 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).
Keep in mind that if you use .ready() after the document is already ready, it will just call the callback you supply right away. That's how the .ready() functionality is defined. So, if you're regularly reregistering .ready() handlers, they will keep getting called each time you register them (after the document is 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():
$(".index__header").load("/view/header.html", function() {
// newly loaded content is ready now
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
