Turbolinks ломает jQuery, который используется на нескольких страницах

Question

Turbolinks ломает jQuery, который используется на нескольких страницах

Я посмотрел на исправления, большинство из них говорят использовать следующее:

var ready;
ready = function() {

// code here

};

$(document).ready(ready);
$(document).on('page:load', ready);

Проблема в том, что на каждой странице, где у меня есть видео html5, я использую jQuery, чтобы включить воспроизведение / паузу кликов со следующим кодом:

$('#support-vid').click(function() {
    $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
});

Однако на первой странице видео работает корректно, jQuery выполняется так, как должно быть. Хотя, когда я перехожу на другую страницу, это просто не работает. Я должен сильно обновить, чтобы заставить его функционировать как надо.

Каков наилучший способ справиться с этим?

1

ruby-on-rails turbolinks

Источник

user5353814 19 сен '15 в 14:30

2 ответа

Другие вопросы по тегам ruby-on-rails turbolinks

user2399861 19 сен '15 в 19:01 2015-09-19 19:01 · Answer 1 · 2015-09-19 19:01

Этот ответ может иметь решение javascript/jQuery...

Однако проблема заключается в Turbolinks...

Есть два способа пойти в таких сценариях:

1: Не отслеживайте код JavaScript, который определяет желаемое поведение... Итак, где-то в вашем макете, в пределах <body></body> раздел вашего документа, может быть, после <%= yield %> часть, вы могли бы сделать следующее:

<script type="text/javascript" data-turbolinks-eval=true>
    $(function() {
        $('#support-vid').on('click',function() {
            $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
        });
    });
</script>

Таким образом, тег script будет вынужден оцениваться при каждой загрузке страницы... data-turbolinks-eval=true поведение по умолчанию для сценариев с неявно установленным типом "text/javascript", так что вам на самом деле не нужно писать это... Однако вы должны написать type="text/javascript",

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

user1661323 19 сен '15 в 16:27 2015-09-19 16:27 · Answer 2 · 2015-09-19 16:27

var ready = function() {
// code here
};

$(document).on('ready page:load', ready);

$(document).on('click', '#support-vid', function() {
    var my_element = $(this).get(0);
    my_element.paused ? my_element.play() : my_element.pause();
});

Проблема в том, что когда вы привязываете обработчик событий, как это

$('#support-vid').click(function()

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

Существует два подхода к решению этой проблемы: первый называется "делегирование события", когда ваш обработчик привязывает событие к документу, который никогда не заменял, и использует фильтры, как в коде выше. Второй подход - обработчик события перепривязки на каждом событии готовности страницы и страница турболинков: событие загрузки выглядит так:

var ready = function() {
    // code here
    $('#support-vid').click(function() {
        $(this).get(0).paused ? $(this).get(0).play() : $(this).get(0).pause();
    });
};

$(document).on('ready page:load', ready);