Jquery 带有Rails 4.1.4的Lightbox或Fancybox仅在刷新后工作

我正在尝试在我的应用程序中使用lighbox或fancybox而不使用gems

我已经尝试放入assets/javascript和assets/stylesheet.js和.css文件。但它们只有在我刷新页面时才起作用

在my application.html.erb中

<%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

true%>
正确%>
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

输出：

<link data-turbolinks-track="true" href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/home.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/jquery.fancybox.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/novidades.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/home.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.fancybox.pack.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/novidades.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $(".fancybox").fancybox();
        });
    </script>

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）；
});

---

有什么问题吗？

Turbolniks

尽管您提到您在“没有宝石”的情况下进行此操作，但它具有

turbolinks

如果您不知道，Turbolinks是一个与Rails捆绑在一起的gem，可以帮助更快地加载页面。它通过基本上拉动页面的

内容来实现这一点，保持

完好无损

尽管Turbolinks在大多数情况下都能正常工作，但它有一个主要缺陷——因为加载页面时JS不会被刷新（因为页面的

头部

区域保持不变），除非刷新页面（从而刷新

标记），否则JS通常不会“工作”

--

修复

有几种方法可以“修复”此问题-基本上让您的JS使用TurboLink刷新：

首先，您需要使用TurboLink：

这应该对你有用。另一种解决方案是使用Fancybox，尽管我认为它在本例中不适用于Fancybox

<script type="text/javascript">    
    $(document).ready(function() {
        $(".fancybox").fancybox({
            parent : 'body'
        });
    });
</script>

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox({
家长：“身体”
});
});

---

添加{parent:'body'}为我工作

这些解决方案都不适用于我，所以我想在使用TurboLink和fancybox v1时，我会放弃适用于我的解决方案：

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

  // this makes sure fancybox has all the elements it needs,
  // that turbolinks removed, while changing page
  $.fancybox.init();

  $('*[data-js-image-popup]').fancybox( {} );

});

---

谢谢你的帮助，这段代码对我不起作用，但是你的解释帮助我理解了真正的问题，所以我尝试了application.js上的“$（'.fancybox'）.fancybox（{parent:“body”}）；”，并开始工作。非常感谢。

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

  // this makes sure fancybox has all the elements it needs,
  // that turbolinks removed, while changing page
  $.fancybox.init();

  $('*[data-js-image-popup]').fancybox( {} );

});