Как заставить jQuery работать с турболинками? - PullRequest
Новая
       8

Как заставить jQuery работать с турболинками?

0 голосов
/ 25 октября 2019

Я создаю Rails приложение и использую некоторые javascript, чтобы создать кнопку, которая будет прокручиваться при нажатии. Я заметил, что код JS перестанет работать, как только я изменю страницы, пока я не обновлю страницу вручную. Я где-то читал, что эта проблема может быть вызвана турболинками, поэтому я просто отключил ее, и все работало нормально. Но теперь мне нужно использовать турболинки, поэтому я пытаюсь решить эту проблему.

Итак, вот мой код, который работал без турболинков:

HTML-код 

<button class="btn" id="scroll_down">Learn more</button>

<div class="container" id="top_features">

jquery код для прокрутки вниз (находится в моей папке ресурсов, в application.js) 

jQuery( document ).ready(function( $ ) {
    $("#scroll_down").click(function() {
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#top_features").offset().top
        }, 1000);
    });
});

Я думаю, что это распространенная проблема, потому что я нашел оченьпохожие вопросы по SO, но ни один из ответов, которые я пробовал, не работал для меня.

Например, с turbolinks 5 я прочитал, что это должно работать:

код jquery, который должен работать сturbolinks 

$(document).on('turbolinks:load', function() {
    $("#scroll_down").click(function() {
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#top_features").offset().top
        }, 1000);
    });
});

Но это не работает для меня даже после обновления страницы.

Я использую JavaScript для переключения между изображениями на той же странице, что икнопка прокрутки вниз, и она работает нормально, я не знаю, почему:

jquery код для изменения изображения (находится в макете application.html.erb) 

<script type = "text/javascript">
    jQuery( document ).ready(function( $ ) {
        var images = [];
        images[0] = "image1.png";
        images[1] = "image2.png";

        var x = 0;

        setInterval(displayNextImage, 5000);
        function displayNextImage() {
            x = (x === images.length - 1) ? 0 : x + 1;
            $("#img").fadeOut(500, function(){
              $(this).attr('src', images[x]).fadeIn(500);
            })
        }
      });
</script>

При моем исходном коде ошибка не отображается в журнале браузера, когда я нажимаю кнопку. Когда я пытаюсь использовать 'turbolinks:load', я получаю эту ошибку: TypeError: $([document.documentElement, document.body]).animate is not a function.

Я использую rails 5.2.3, turbolinks 5.2.1 и jquery 3.2.1

Спасибо.

РЕДАКТИРОВАТЬ:

Мне удалось немного продвинуться. Добавив <%= javascript_include_tag "application", async: true %> к голове моего application.html.erb, я теперь имею ту же ошибку, используя турболинки с: 

$(document).on('turbolinks:load', function() {
    $("#scroll_down").click(function() {
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#top_features").offset().top
        }, 1000);
    });
});

и 

jQuery( document ).ready(function( $ ) {
    $("#scroll_down").click(function() {
        $([document.documentElement, document.body]).animate({
            scrollTop: $("#top_features").offset().top
        }, 1000);
    });
});

, что:

TypeError: $([document.documentElement, document.body]).animate is not a function

Меньшая точность здесь: эта ошибка возникает при навигации по сайту. При обновлении страницы JS работает нормально.

...