Turbolinks предотвращает $(document).ready()запуск обычных событий при всех посещениях страницы, кроме начальной загрузки, как описано здесь и здесь . Однако ни одно из решений в связанных ответах не работает с Rails 5. Как я могу запускать код при каждом посещении страницы, как в предыдущих версиях?
Вместо того, чтобы слушать readyсобытие, вам нужно подключиться к событию, запускаемому Turbolinks при каждом посещении страницы.
К сожалению, Turbolinks 5 (версия, которая появляется в Rails 5) была переписана и не использует те же имена событий, что и в предыдущих версиях Turbolinks, что приводит к сбою упомянутых ответов. Что теперь работает, так это прослушивание события turbolinks: load следующим образом:
$( document ).on('turbolinks:load', function() {
console.log("It works on each visit!")
})
on('ready turbolinks:load')противном случае у меня проблемы на некоторых страницахСобственный JS:
document.addEventListener("turbolinks:load", function() { console.log('It works on each visit!'); });источник
В рельсах 5 проще всего использовать:
$(document).on('ready turbolinks:load', function() {});Вместо
$(document).ready. Работает как шарм.источник
readyв список, иначе функция будет выполнена дважды. Как сказано на github.com/turbolinks/turbolinks/#observing-navigation-events , вы должны сделать это так:javascript $(document).ready(function() { $(document).on('turbolinks:load', function() {} ) })$(document).readyсработает, то, по крайней мере, в моих собственных сценариях, мне не понадобитсяturbolinks:loadreadyзапускается только событие. Если есть турболинки, код вызывается дваждыЭто мое решение, переопределить
jQuery.fn.ready, а затем$(document).readyработает без каких-либо изменений:jQuery.fn.ready = (fn)-> $(this).on 'turbolinks:load', fnисточник
documentобратные вызовы. Почему голос против? Это должно быть безопасно, пока турболинки используются во всем приложении, верно?(Для кофе)
Я использую:
$(document).on 'turbolinks:load', ->Вместо:
$(document).on('turbolinks:load', function() {...})источник
Вот решение, которое работает для меня, отсюда :
установить
gem 'jquery-turbolinks'добавьте этот файл .coffee в свое приложение: https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee
назовите его turbolinks-compatibility.coffee
в application.js
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require turbolinks //= require turbolinks-compatibilityисточник
productionenv? Вы это проверили? Некоторые говорят, что вdevelopmentрежиме он работает нормально .Пока мы ждем исправления этого действительно крутого драгоценного камня, я смог продвинуться вперед, изменив следующее;
addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbo:ready', -> callback($)кому:
addCallback: (callback) -> if $.turbo.isReady callback($) $document.on 'turbolinks:load', -> callback($)Я еще не знаю, что это не решает, но при первоначальной проверке казалось, что это работает хорошо.
источник
Используйте легкий гем jquery-turbolinks .
Это позволяет
$(document).ready()работать с Turbolinks без изменения существующего кода.В качестве альтернативы вы можете выбрать
$(document).ready()один из следующих вариантов:$(document).on('page:fetch', function() { /* your code here */ }); $(document).on('page:change', function() { /* your code here */ });в зависимости от того, какой из них более уместен в вашей ситуации.
источник
чистый современный js:
const onLoad = () => { alert("works") } document.addEventListener("load", onLoad) document.addEventListener("turbolinks:load", onLoad)источник