Question

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

我读到这可能是由于turbolinks，但由于这些插件是在身体而不是头部，所以它看起来不像是一个涡轮连接问题。

我甚至尝试在头部和页脚标签中粘贴这些，但这些给了我同样的问题。有时，其中一个插件加载而另一个插件没有。

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

有什么建议吗？

演示页面http://mktdemo.herokuapp.com/listings/45

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ashfaaq">
</script>

    <script>

        jQuery(document).ready(function($) {
      $('#gallery-1').royalSlider({
        fullscreen: {
          enabled: true,
          nativeFS: true
        },
        controlNavigation: 'none',
        autoScaleSlider: true, 
        autoScaleSliderWidth: 960,     
        autoScaleSliderHeight: 850,
        imageScaleMode: 'fit-if-smaller',
        navigateByClick: true,
        numImagesToPreload:2,
        arrowsNav:true,
        arrowsNavAutoHide: true,
        /* arrowsNavHideOnTouch: true, */
        keyboardNavEnabled: true,
        fadeinLoadedSlide: true,
        globalCaption: false,
        globalCaptionInside: false,
        loop: true,
        thumbs: {
          appendSpan: true,
          firstMargin: true,
          paddingBottom: 4
        } 
      });
    });

    </script>

Answer 1

听起来像turbolinks是导致问题的原因。

您可以安装此gem：Jquery Turbolinks

或者你可以替换

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

与

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

这是一个很好的复制/粘贴，为什么turbolinks会导致jquery出现问题。

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

Source

Answer 2

您可以在此处找到问题的答案： Rails 4 turbo-link prevents jQuery scripts from working

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

要触发您的javascript，您必须使用Turbolinks事件，例如

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

或

page:load is fired at the end of the loading process.

此处有更多详情：https://github.com/rails/turbolinks/#events

您可以在这里替换

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

通过

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

Answer 3

我在Rails 5上的jQuery图像库遇到了同样的问题。除非页面被刷新，否则不会加载。经过一年的（开启和关闭）尝试，这是对我有用的黑客：

将jQuery图库代码包装在一个函数中：

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

然后用setTimeout调用它：

setTimeout(delayLoad, 250)

每次都解决了这个问题而无需刷新页面。

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

3 个答案: