Javascript Rails项目：在刷新之前不加载jQuery插件

我正在Rails 4中构建一个应用程序。我的show页面上有下面的JS插件，但它们似乎只有在我手动重新加载页面时才起作用

我读到这可能是由于turbolinks，但由于这些插件在身体而不是头部，这似乎不是turbolinks的问题

我甚至试着把这些贴在页眉和页脚标签上，但它们给了我同样的问题。有时，一个插件加载，另一个不加载

下面的第一个插件是AddThis社交按钮，另一个是图像库

有什么建议吗

演示页面

jQuery（文档）.ready（函数（$）{
$（'#gallery-1'）。royalSlider({
全屏：{
启用：对，
nativeFS：没错
},
controlNavigation:“无”，
自动缩放滑块：对，
自动缩放滑块宽度：960，
自动缩放滑块高度：850，
imageScaleMode:“如果较小，则适合”，
导航时钟：是的，
numimagestopload:2，
阿罗斯纳夫：是的，
箭头：是的，
/*arrowsNavHideOnTouch:没错*/
键盘导航已启用：true，
fadeinLoadedSlide：没错，
globalCaption:错误，
globalCaptionInside:错误，
循环：对，
拇指：{
对,，
没错，
垫底：4
} 
});
});

听起来TurboLink是您的问题的原因

您可以安装此gem：

或者你可以替换

jQuery(document).ready(function(
     ....
));

与

下面是一个很好的复制/粘贴，说明了为什么TurboLink会导致jquery出现一些问题

TurboLinks是一个类似PJAX的库，它异步请求下一页的内容并将其插入当前页的正文，而不需要重新加载整个页面。它很好地加快了页面加载时间。但是，由于页面已重新加载，因此会触发DOMContentLoaded事件，并且不会触发jQuery document.ready事件

---

您可以在此处找到问题的答案：

Rails 4使用Turbolinks，它只加载页面javascript和css一次，然后只替换页眉中的正文和标题。这就是为什么jQuery（document）.ready只有在重新加载页面时才起作用

为了触发javascript，必须使用TurboLink事件，如

page:change the page has been parsed and changed to the new version and on DOMContentLoaded

或

详情如下：

在这里，您只需更换您的

jQuery(document).ready(function($) {
...

借

---

我在Rails5上的jQuery图像库也有同样的问题。除非刷新页面，否则它不会加载。经过一年（断断续续）的尝试，以下是对我有用的技巧：

将jQuery库代码包装到函数中：

var delayLoad = function(){
 $('#gallery-1').royalSlider({
 ...
 })
}

然后使用setTimeout调用它：

setTimeout(delayLoad, 250)

这为我解决了问题，每次不必刷新页面

jQuery(document).ready(function($) {
...

$(document).on('page:load', function($) { 
...

var delayLoad = function(){
 $('#gallery-1').royalSlider({
 ...
 })
}

setTimeout(delayLoad, 250)