1. дома
  2. Вопрос и ответ
  3. Javascript будет работать только после обновления страницы

Javascript будет работать только после обновления страницы

2014-09-22 5 views
2

Я использую Bootstrap 3.2.0. Я пытаюсь использовать две функции javascript для начальной загрузки: Scrollspy и Affix. Цель состоит в том, чтобы сделать scrollspy на стороне, которая будет прокручиваться вместе с остальной частью страницы, используя аффикс. DemoJavascript будет работать только после обновления страницы

Ниже представлен мой файл javascript, включенный в состав head по конвейеру Rails.

$(document).ready(function() { 

    // Use affix plugin 
    $("#sidebar").affix({ 
    offset: { top: 280 } 
    }); 

    // Use Scrollspy 
    $('body').scrollspy({ target: '#sidebar', offset: 200 }); 

}

scrollspy работает плавно, но наклеить плагин не делает, если я не обновить страницу после начальной загрузки. Используя инструменты разработчика в хроме, я заметил, что javascript не добавляет affix-top в sidebar, загружает первую страницу времени.

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

Я использую Rails 4.1.5.

источник

2014-09-22 Sung Won Cho

ответ

3

Turbolinks

вопрос почти наверняка Turbolinks - это Java-библиотека, которая призвана ускорить ваши страницы, только retreiving в <body> тег от нового запроса, оставив <head> неповрежденным.

Хотя Turbolinks очень эффективен, у него есть тенденция «разбить» функциональность приложения, не обновляя Javascript на вашей странице.

-

Вопрос заключается в том, что, поскольку JS связывается только с DOM элементами, которые загружаются, когда JS был загружен. Если Turbolinks загружает новые элементы без обновления JS, он непреднамеренно заставляет JS думать, что вы не обновили свои элементы/страницу, тем самым не позволяя ему «привязываться» к вашим новым элементам.

Решение этого вопроса является двукратным :

  1. "Delegate" ваших JS от последовательного элемента (обычно document)
  2. Используйте Turbolinks "крючки событий" для управления на странице JS events

Вот что я хотел бы сделать:

#app/assets/javascripts/application.js 
var loaded = function(){ 

    // Use affix plugin 
    $("#sidebar").affix({ 
    offset: { top: 280 } 
    }); 

    // Use Scrollspy 
    $('body').scrollspy({ target: '#sidebar', offset: 200 }); 

} 
$(document).on("page:load ready", loaded);

источник

2014-09-22 06:48:50

+0

Спасибо, я сделал его работу, окружив весь код вокруг '$ (документ) .ready (функция() {}) и' $ (окно) .bind ('page: change', function() {}) 'Но ваше решение намного проще. –

+0

Мне просто хотелось обернуть голову вокруг ситуации. Мое понимание проблемы заключается в том, что я добавил новые элементы DOM после того, как Turbolinks загрузил JS-файл, и JS-файл не может привязываться к новым элементам, если я не обновляю страницу. Это верно? –

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

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