2016-09-03 9 views
3

При использовании $(document).ready(function(){...}); (версия 1) функция готовности документа срабатывает неограниченно. Я предполагаю, что готовность запускается каждый раз функция JQuery .load заканчивает? хотелось бы, чтобы подтвердить.

Так что я попытался с помощью $(document).one('ready', function(){...}); функции JQuery в (версия 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(); 
}); 
+0

какая ошибка вы получаете на консоли? –

+0

Непонятно, что вы хотите сделать. Загрузите логин после заголовка? Затем выполните '$ (function() {$ (". Index__content "). Load ("/view/header.html ", function() { $ (". Index__content "). Load ("/view/login.html ");});});' – mplungjan

ответ

5

$(document).ready() осуществляется специальным образом. Когда он используется до того, как документ готов, он устанавливает слушателя для события DOMReady. Но если он вызывается снова после того, как документ готов, он просто выполняет код безоговорочно, он не ждет события (потому что событие DOMReady происходит только один раз).

ready не является реальным событием, поэтому .one() не будет работать с ним.

+1

Ну, '.on ('ready')' и '.one ('ready')' действительно работают в jQuery 1.x и 2.x, хотя он удален в 3.x. Таким образом, событие моделируется в некоторых версиях. См. Https://jsfiddle.net/z9vhLaLn/. На странице doc jQuery '.ready()' doc обсуждается это. – jfriend00

+0

'$ (document) .on ('ready', handler)' удален из jQuery 3.x (см. [JQuery api docs] (http://api.jquery.com/ready/)) –

3

Там нет смысла делать $(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(), они будут постоянно получать вызовы каждый раз, когда вы их регистрируете (после того, как документ будет готов).


FYI, если то, что вы пытаетесь сделать, это выяснить, когда новый загруженный контент готов для нас, то вы должны использовать функцию обратного вызова, которая может быть предоставлена ​​.load():

$(".index__header").load("/view/header.html", function() { 
    // newly loaded content is ready now 
}); 
Смежные вопросы