Я столкнулся с проблемой в своем приложении на Rails 4, пытаясь организовать файлы JS «по пути». Ранее они были разбросаны по разным взглядам. Я организовал их в отдельные файлы и скомпилировал их с конвейером ресурсов. Однако я только что узнал, что событие «готово» в jQuery не срабатывает при последующих щелчках, когда включена турбо-ссылка. При первой загрузке страницы это работает. Но когда вы нажимаете на ссылку, ничего внутри ready( function($) {
не будет выполнено (потому что страница на самом деле не загружается снова). Хорошее объяснение: здесь .
Поэтому мой вопрос: как правильно обеспечить правильную работу событий jQuery при включенных турбо-ссылках? Вы оборачиваете сценарии в специфичный для Rails слушатель? А может, у рельсов есть какая-то магия, которая делает это ненужным? Документы немного расплывчаты о том, как это должно работать, особенно в отношении загрузки нескольких файлов через манифест (ы), такие как application.js.
источник
var ready = function() { ... } $(document).ready(ready) $(document).on('page:load', ready)
есть ли беспокойство о том, чтобы и то.ready
и другое'page:load'
сработало?ready
событие. Если это нагрузка turbolinks, толькоpage:load
событие. Это невозможно для обоихready
иpage:load
быть уволенным на одной странице.page:load
иready
включив разделенную пробелами строку для первого аргумента.$(document).on('page:load ready', ready);
Второй аргумент - это просто функция с именемready
, которое следует примеру этого ответа.Я только что узнал о другом варианте решения этой проблемы. Если вы загружаете на
jquery-turbolinks
драгоценный камень будет связывать события Rails Turbolinks кdocument.ready
событиям , так что вы можете написать JQuery обычным способом. Вы просто добавляетеjquery.turbolinks
сразу после этогоjquery
в файл манифеста js (по умолчанию:)application.js
.источник
//= require jquery.turbolinks
в манифест (например, application.js).Недавно я нашел самый простой и понятный способ борьбы с ним:
ИЛИ
РЕДАКТИРОВАТЬ
Если вы делегировали события, связанные с
document
, убедитесь, что вы прикрепили их внеready
функции, иначе они получат отскок при каждомpage:load
событии (вызывая многократное выполнение одних и тех же функций). Например, если у вас есть какие-либо звонки, как это:Возьмите их из
ready
функции, вот так:Делегированные события, связанные с
document
не должны быть связаны сready
событием.источник
ready()
функции. Дополнительные бонусы за объяснение привязки делегированных событий за пределамиready
функции.$(document).on( "ready", handler ), deprecated as of jQuery 1.8.
jquery / readyready
часть сделана недействительной BY, используя драгоценный камень?Обнаружил это в документации по Rails 4 , аналогично решению DemoZluk, но немного короче:
ИЛИ
Если у вас есть внешние скрипты, которые вызывают
$(document).ready()
или если вы не можете переписывать все существующие JavaScript, этот гем позволяет вам продолжать использовать$(document).ready()
с TurboLinks: https://github.com/kossnocorp/jquery.turbolinksисточник
Согласно новым направляющим рельсов , правильный путь заключается в следующем:
или, в coffeescript:
Не слушайте событие,
$(document).ready
и будет запущено только одно событие. Никаких сюрпризов, нет необходимости использовать драгоценный камень jquery.turbolinks .Это работает с рельсами 4.2 и выше, а не только с рельсами 5.
источник
"turbolinks:load"
событие работает в Rails 4.2?turbolinks:
Приставка события была введена в Нью - Turbolinks и не используется в Rails 4.2 IIRC , который использует Turbolinks Классики . Попробуйте попробовать,"page:change"
если"turbolinks:load"
не работает в вашем приложении до Rails 5. См. Guides.rubyonrails.org/v4.2.7/…page:change
или обновите турболинк. Также обнаружил, что это может иметь отношение к некоторым, где turbolinks переводит события в старые имена событий: github.com/turbolinks/turbolinks/blob/v5.0.0/src/turbolinks/…alert "page has loaded!"
использовать отступ для фактического запуска функцией обратного вызова?ПРИМЕЧАНИЕ. См. Ответ @ SDP, чтобы узнать о чистом встроенном решении.
Я исправил это следующим образом:
убедитесь, что вы включили application.js до включения других зависимых от приложения js-файлов, изменив порядок включения следующим образом:
Определите глобальную функцию, которая обрабатывает привязку в
application.js
Теперь вы можете связать такие вещи, как:
источник
ready
события, это означает , что вы можете использовать «стандартный» способ инициализации:$(document).ready(function() { /* do your init here */});
. Ваш код инициализации должен быть вызван, когда полная страница загружена (-> без TurboLinks), и ваш код инициализации должен быть выполнен снова, когда вы загружаете страницу через TurboLinks. Если вы хотите выполнить какой-то код ТОЛЬКО при использовании турболинка:$(document).on('page:load', function() { /* init only for turbolinks */});
Ничто из вышеперечисленного не работает для меня, я решил это, не используя jQuery $ (document) .ready, а вместо этого использовал addEventListener.
источник
источник
turbolinks:load
при самой первой загрузке страницы, Safari этого не делает, и хакерский способ исправить это (turbolinks:load
включениеapplication.js
) явно ломает Chrome (который срабатывает дважды при этом). Это правильный ответ. Обязательно идите с 2 событияready
иturbolinks:load
.Вы должны использовать:
из турболинки док .
источник
Либо использовать
или используйте функцию .on в jQuery для достижения того же эффекта
смотрите здесь для получения дополнительной информации: http://srbiv.github.io/2013/04/06/rails-4-my-first-run-in-with-turbolinks.html
источник
Вместо того, чтобы использовать переменную для сохранения «готовой» функции и привязки ее к событиям, вы можете запускать
ready
событие при каждомpage:load
запуске.источник
Вот что я сделал для того, чтобы вещи не выполнялись дважды:
Я считаю, что использование
jquery-turbolinks
драгоценного камня или объединение$(document).ready
и /$(document).on("page:load")
или использование$(document).on("page:change")
само по себе ведет себя неожиданно - особенно если вы в разработке.источник
$(document).off
бита в этой анонимной функции «page: change» выше, оно, очевидно, предупредит, когда я доберусь до этой страницы. Но, по крайней мере, при разработке под управлением WEBrick, он также будет предупреждать, когда я нажимаю ссылку на другую страницу. Событие хуже, оно предупреждает дважды, когда я затем нажимаю ссылку на исходную страницу.Я нашел следующую статью, которая отлично работает для меня, и подробно описывает использование следующего:
источник
Я подумал, что оставлю это здесь для тех, кто обновляет Turbolinks 5 : самый простой способ исправить ваш код - это перейти из:
чтобы:
Ссылка: https://github.com/turbolinks/turbolinks/issues/9#issuecomment-184717346
источник
источник
turbolinks:load
срабатывает событие для начальной загрузки страницы, а также после следующих ссылок. Если вы прикрепите событие как к стандартномуready
событию, так и кturbolinks:load
событию, оно сработает дважды при первом посещении страницы.ready
при последующих загрузках страницы он запускается дважды. Пожалуйста, измените или удалите его.Испытано так много решений, наконец, пришли к этому. Это много, ваш код определенно не вызывается дважды.
источник
Я обычно делаю следующее для своих проектов:
В
application.js
Затем в остальных файлах .js вместо того, чтобы использовать
$(function (){})
я вызываюonInit(function(){})
источник
Сначала установите
jquery-turbolinks
гем. И затем, не забудьте переместить ваши включенные файлы Javascript из конца вашего телаapplication.html.erb
в его<head>
.Как описано здесь , если вы поместили ссылку javascript приложения в нижний колонтитул в целях оптимизации скорости, вам нужно будет переместить его в тег, чтобы он загружался до содержимого в теге. Это решение сработало для меня.
источник
Я обнаружил, что мои функции удваиваются при использовании функции для
ready
иturbolinks:load
поэтому я использовал,Таким образом, ваши функции не удваиваются, если поддерживаются turbolinks!
источник