Turbolinks打破jQuery的是在多个页面上

我看着修复使用，大多说使用以下命令：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的执行，因为它应该是。虽然当我去另一个页面时，它不起作用。我必须努力刷新才能使其正常运行。

什么是最好的管理方式？

来源

2015-09-19 C. Short

那么，你需要使用发布在你的问题上的解决方案。 0_o – BroiSatse

伴侣，你有可能放弃一个链接吗？除了广告之外，我的问题上面没有显示任何内容！ –

我的意思是后面的部分：'我查看了修复程序，其中大多数人都说要使用以下内容：';） – BroiSatse

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。而你的事件处理程序将不会再次触发。

有两种方法可以解决这个问题：第一个叫做'事件委托'，当你的事件处理程序绑定到文件上时，它永远不会像上面的代码那样替换和使用过滤器。第二种方法是在每个页面ready事件和turbolinks页面重新绑定事件处理程序：加载事件是这样的：

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

来源

2015-09-19 16:27:43 greenif

您应该花一些时间来解释您的解决方案如何解决OP的问题。这些类型的仅用于代码的答案不一定能提供足够的信息，表明某种方式或者为什么某种方式按照其方式工作。 – MarsAtomic

这个答案可能有一个JavaScript/jQuery的解决方案......

然而，问题的关键在于在Turbolinks ...

有两种方法在这样的场景中去：

1：不要在你的布局跟踪的JavaScript代码，定义你想要的行为......因此，某处时，内您的文档的210节中，<%= 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，但我不会那样做。

来源

2015-09-19 19:01:34

Turbolinks打破jQuery的是在多个页面上

回答

相关问题