События DOM, использующие jQuery / Javascript, работают только с $ (). Ready или window.onload - PullRequest
Новая
       10

События DOM, использующие jQuery / Javascript, работают только с $ (). Ready или window.onload

0 голосов
/ 20 мая 2018

Мой код jQuery добавляет класс к элементу при нажатии кнопки.Код работает, только если я передаю его в $ (document) .ready ().То же самое относится и к Javascript, код работает нормально, только если я использую window.onload.В чем причина такого поведения?Мой файл .js находится в разделе HTML «head» и уже читается во время рендеринга HTML-страницы браузером.

$('#switcher-large').on('click', function(){
   $('#content').addClass('large');
});

var docId = document.getElementById('switcher-large');
docId.onclick = function(){
    var content = document.getElementById('content').classList.add('large');
}

Рабочий код: 

$(document).ready(function(){
    $('#switcher-large').on('click', function(){
        $('#content').addClass('large');
    });
});

window.onload = function(){
    var docId = document.getElementById('switcher-large');
    docId.onclick = function(){
        var content = document.getElementById('content').classList.add('large');
    }
}

Ответы [ 3 ]

0 голосов
/ 20 мая 2018

Вам необходимо знать жизненный цикл документа, чтобы понять это поведение.Браузер выполнит все сценарии до того, как DOM будет готов, потому что событие не было прикреплено, поскольку элемент не был там, когда выполнялся сценарий.

window.onload запускается после создания DOM и всех ресурсовзагружены (например, изображения), теперь все элементы доступны, и скрипт будет работать нормально.

Для получения дополнительной информации читайте эту страницу https://javascript.info/onload-ondomcontentloaded#domcontentloaded

0 голосов
/ 20 мая 2018

Это потому, что ваш html еще не рендерился.Подумайте о браузере, читающем вашу страницу построчно и выполняющем все, что вы просите, чтобы он выполнялся, поэтому, если вы скажете ему получить элемент до его обработки, он не сможет это сделать.

Кроме того, в событии onload вы также можете поместить скрипт после элементов (для лучшего понимания того, как все работает, ваш способ, используя onload, прекрасно подходит, если не лучше): 

<span id="content">Hello StackOverflow!</span>
<button type="button" id="switcher-large">&#x1F50E;</button>
<script>
    var docId = document.getElementById('switcher-large');
    docId.onclick = function(){
        var content = document.getElementById('content').classList.add('large');
    };
</script>
0 голосов
/ 20 мая 2018

HTML-страницей нельзя безопасно манипулировать, пока документ не станет ready.Вы добавили теги js в начало документа, в <head> еще до того, как написано <body>.Итак, если вы манипулируете чем-то из содержимого <body>, оно не присутствует во время выполнения.Теперь содержимое в $(document).ready(function(){} выполняется, когда весь документ HTML готов и все элементы присутствуют в документе.Поэтому, когда вы используете :: 

$('#switcher-large').on('click', function(){
   $('#content').addClass('large');
});

, он выполнит before вашу кнопку с идентификатором #switcher-large, загруженным в документ.

...