Question

我已经查看了修复程序，大多数人都说要使用以下内容：

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将按原样执行。虽然当我去另一页时它只是不起作用。我必须努力刷新才能使其正常运行。

管理此问题的最佳方法是什么？

Answer 1

这个答案可能有一个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>

这样，脚本标记将被强制在每个页面加载时进行评估... data-turbolinks-eval=true是隐式类型设置为"text/javascript"的脚本的默认行为，因此您不需要写它...但你需要写type="text/javascript"。

第二种方法是禁用导致问题的视图上的turbolinks，但我不会这样做。

Answer 2

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()

将此处理程序绑定到某个元素。当turbolinks重新加载页面时，它会替换整个主体，因此用具有相同属性的绝对新元素替换元素，在本例中为ID。并且您的事件处理程序将永远不会再次触发。

有两种方法可以解决此问题：第一个叫做事件委托＆＃39;当你的绑定事件处理程序来自哪个文件从未被替换并使用过滤器之类的代码时。第二种方法是在每个页面就绪事件和turbolinks页面上重新绑定事件处理程序：load事件，如下所示：

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);

Turbolinks打破了在多个页面上使用的jQuery

2 个答案: