Question

我有一个rails应用https://hr4d.herokuapp.com问题是，当我访问新页面时，页面没有正确加载，这使我的JQuery失效。你可以访问该网站，看看我的意思。这是我的JQuery：

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

    $('.dropdown-services').hide(000);

    $('#caret').click(function() {

        if($('.dropdown-services').is(":visible")) {
            $('.dropdown-services').slideUp(300);
        }
        else {
            $('.dropdown-services').slideDown(300);
        }
    });

});

这是我的导航栏代码：

<div class="navbar">

    <div class="box first">
      <a href="/pages/home" class="link-disabled">HR4D</a>
    </div>

    <div class="box second">
      <span class="tagline">Define, Develop, Deliver, and Differentiate</span>
      <br>

      <a class="link" href="/pages/home">
        Home
      </a>

      <a class="left link" id="services" href="/pages/services">
        Services
      </a>
      <div class="caret" id="caret"></div>

      <a class="left link" href="/pages/contact">
        Contact Us
      </a>

      <a class="left link" href="/pages/about">
        About
      </a>

    </div>

</div>

不确定如何解决此问题。任何帮助表示赞赏。

Answer 1

问题主要是由Turbolinks造成的。我经常解决的一种方法是完全禁用Turbolink或为代码的特定部分禁用它。要全局禁用，您可以在app/assets/javascripts/application.js中删除需要使用turbolinks的行。

Answer 2

真正的问题不在于重新加载，它解决了导致您的网页无法正常加载的问题。

您应该从app/assets/javascripts/application.js文件中删除以下行：

//= require turbolinks

很有可能解决这个问题。但是，您可能更愿意在应用程序中继续使用TurboLinks。如果是这样，您必须处理页面动态更新时触发的不同TurboLinks事件。这些事件是＆＃34; page：load＆＃34;和＆＃34; page：restore＆＃34;，并且应该以与jQuery(document).ready回调相同的方式处理。您可以使用以下公式来执行此操作。

在HTML中，添加一个脚本，用于加载当前Javascript ready处理程序中的代码：

<body>
  <!-- important body stuff -->
  <script>
  jQuery(document).ready(onThisPageReady);
  jQuery(document).on('page:load', onThisPageReady);
  jQuery(document).on('page:restore', onThisPageReady);
  </script>
</body>

onThisPageReady函数属于您正在构建的页面的Javascript源代码，如果适用于所有页面，则属于app/assets/javascripts/application.js。只需将其包含在相应的Javascript资产文件中即可：

function onThisPageReady() {
    $('.dropdown-services').hide(000);

    $('#caret').click(function() {
        if($('.dropdown-services').is(":visible")) {
            $('.dropdown-services').slideUp(300);
        }
        else {
            $('.dropdown-services').slideDown(300);
        }
    });
});

一旦完成了这项工作，您就可以使用TurboLinks进行动态初始化。 TurboLinks Events的完整列表可在TurboLinks Classic github project上找到。如果您当前正在构建Rails 5应用程序，则TurboLinks的版本为 new ，并且具有完全不同的要注册的事件集，您可以在TurboLinks 5 Full List of Events中找到它们。

如何在访问页面时重新加载页面

2 个答案: