Javascript на странице загрузки: работает в консоли, но не под нагрузкой

Я хочу, чтобы запустить этот JavaScript на моей домашней странице при загрузке:Javascript на странице загрузки: работает в консоли, но не под нагрузкой

$(".mm-page").css({"position":"inherit"});

Я добавил это в нижней части моего home.html.erb:

<% content_for(:after_js) do %> 
    <script type="text/javascript"> 
    console.log("before"); 
    $(".mm-page").css({"position":"inherit"}); 
    console.log("after"); 
    </script> 
<% end %>

Оба console.log отображаются в консоли, но jquery не влияет. Если я вручную запускаю строку jquery в консоли, она работает так, как ожидалось.

Как исправить это?

источник

2016-03-16 Graham Slick

Добавить скрипт в йот готовый обработчик и попробовать –

Поскольку вы хотите заставить его работать на странице при загрузке, вы должны обернуть его внутри готового обработчика. Метод ready() указывает, что происходит, когда происходит событие готовности. могут быть использованы

Два Синтаксисы:

$(document).ready(function(){ 
    $(".mm-page").css({"position":"inherit"}); 
});

ИЛИ

$(function() { 
    $(".mm-page").css({"position":"inherit"}); 
});

быть также уверены, что элемент .mm-page существует в данный момент вы используете его с помощью селектора JQuery.

источник

2016-03-16 07:44:32

Чтобы гарантировать существование всех существующих элементов DOM, поместите тег script в самое нижнее положение HTML, непосредственно перед закрывающим тегом </body>. Все элементы, определенные выше HTML, будут доступны для использования. Это также гарантирует, что браузер может показать пользователю страницу перед загрузкой любых внешних файлов сценариев, которые вы ссылаетесь. Например:

<!doctype html> 
<html> 
<!-- ...your page here... --> 
<script src="jquery.js"></script> 
<script> 
    console.log("before"); 
    $(".mm-page").css({"position":"inherit"}); 
    console.log("after"); 
</script> 
</body> 
</html>

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

В качестве альтернативы, вы можете использовать ready обратного вызова JQuery, но с тегами сценария в правильном месте, это не нужно.

Side Примечание: По умолчанию type является JavaScript, нет необходимости указывать его на script теге.

источник

2016-03-16 07:48:40

console.log appear in the console

Потому что ваш DOM закончил загрузку и теперь готов к использованию.

Именно поэтому вы получаете эффект jQuery.

В вашем текущем скрипте он не дожидается завершения DOM загрузки и непосредственного использования на нем, который недоступен, так как он не загружен.

Eiher скрипт записи его в

$(document).ready(function() { 
    // Handler for .ready() called. 
});

ИЛИ:

$(function() { 
    // Handler for .ready() called. 
});

источник

2016-03-16 07:49:54

Javascript на странице загрузки: работает в консоли, но не под нагрузкой

ответ

Смежные вопросы