Можете ли вы иметь несколько $(document).ready(function() {...}); разделы?

Ответ 1

У вас может быть несколько, но это не всегда самая сложная вещь. Старайтесь не злоупотреблять ими, так как это серьезно повлияет на читаемость. Кроме этого, это совершенно законно. См. Ниже:

http://www.learningjquery.com/2006/09/multiple-document-ready

Попробуйте следующее:

$(document).ready(function() {
    alert('Hello Tom!');
});

$(document).ready(function() {
    alert('Hello Jeff!');
});

$(document).ready(function() {
    alert('Hello Dexter!');
});

Вы найдете, что это эквивалентно этому, обратите внимание на порядок выполнения:

$(document).ready(function() {
    alert('Hello Tom!');
    alert('Hello Jeff!');
    alert('Hello Dexter!');
});

Также стоит отметить, что функция, определенная внутри одного блока $(document).ready, не может быть вызвана из другого блока $(document).ready, я просто выполнил этот тест:

$(document).ready(function() {
    alert('hello1');
    function saySomething() {
        alert('something');
    }
    saySomething();

});
$(document).ready(function() {
    alert('hello2');
    saySomething();
}); 

:

hello1
something
hello2

Ответ 2

Вы можете использовать несколько. Но вы также можете использовать несколько функций внутри одного документа. Также:

$(document).ready(function() {
    // Jquery
    $('.hide').hide();
    $('.test').each(function() {
       $(this).fadeIn();
    });

    // Reqular JS
    function test(word) {
       alert(word);
    }
    test('hello!');
});

Ответ 3

Да, вы можете легко иметь несколько блоков. Просто будьте осторожны с зависимостями между ними, поскольку порядок оценки может быть не таким, каким вы ожидаете.

Ответ 4

Да можно иметь несколько вызовов $(document).ready(). Однако я не думаю, что вы можете знать, каким образом они будут выполнены. (источник)

Ответ 5

Да, это возможно, но вы можете лучше использовать div #mydiv и использовать оба

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

//and

$("#mydiv").ready(function(){});

Ответ 6

Да, это отлично. Но не делайте это без причины. Например, я использовал его для объявления глобальных правил сайта отдельно, чем отдельные страницы, когда мои файлы javascript генерировались динамически, но если вы просто продолжаете делать это снова и снова, это затруднит чтение.

Также вы не можете получить доступ к некоторым методам из другого   jQuery(function(){}); вызов так что еще одна причина, по которой вы этого не хотите.

Со старым window.onload, хотя вы заменяете старый каждый раз, когда вы задали функцию.

Ответ 7

Да, вы можете.

Несколько готовых к обработке документов особенно полезны, если у вас есть другие модули, которые выходят на ту же страницу, что и ее использование. Со старым объявлением window.onload=func каждый раз, когда вы указываете функцию, которую нужно вызвать, она заменяет старый.

Теперь все указанные функции поставлены в очередь/уложены (может кто-то подтвердить?) независимо от того, в какой секции готового документа они указаны.

Ответ 8

Я думаю, что лучший способ - переключить на именованные функции (проверьте этот переполнение для получения дополнительной информации по этому вопросу). Таким образом, вы можете вызвать их из одного события.

Так же:

function firstFunction() {
    console.log("first");
}

function secondFunction() {
    console.log("second");
}


function thirdFunction() {
    console.log("third");
}

Таким образом вы можете загрузить их в одной готовой функции.

jQuery(document).on('ready', function(){
   firstFunction();
   secondFunction();
   thirdFunction();

});

Это выведет на консоль .log следующее:

first
second
third

Этот способ позволяет повторно использовать функции для других событий.

jQuery(window).on('resize',function(){
    secondFunction();
});

Проверьте эту скрипту для рабочей версии

Ответ 9

Это законно, но иногда это вызывает нежелательное поведение. В качестве примера я использовал библиотеку MagicSuggest и добавил два входа MagicSuggest на странице моего проекта и использовал отдельные готовые документы для каждой инициализации входных данных. Самая первая инициализация ввода работала, но не вторая, а также не давала никакой ошибки, второй вход не отображался. Поэтому я всегда рекомендую использовать одну функцию Document Ready.

Ответ 10

Вы можете даже вставлять готовые документы внутри встроенных html файлов. Вот пример использования jquery:

Файл: test_main.html

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="jquery-1.10.2.min.js"></script>
</head>

<body>
    <div id="main-container">
        <h1>test_main.html</h1>
    </div>

<script>
    $(document).ready( function()
    {
        console.log( 'test_main.html READY' );
        $("#main-container").load("test_embed.html");
    } );
</script>

</body>
</html>

Файл: test_embed.html

<h1>test_embed.html</h1>
<script>
    $(document).ready( function()
    {
        console.log( 'test_embed.html READY' );
    } );
</script>

Консольный выход:

test_main.html READY                       test_main.html:15
test_embed.html READY                      (program):4

Браузер показывает:

test_embed.html