如果不进行硬刷新，我的 Rails 应用将不会加载 Jquery 弹出窗口

Question

我遵循了一个简单弹出窗口的教程，

在此处找到演示：http://demos.inspirationalpixels.com/popup-modal/ 代码在这里找到：https://inspirationalpixels.com/tutorials/custom-popup-modal/

我的问题如下：

登陆第一页，点击弹出按钮——弹出窗口打开。
关闭弹出窗口并导航到第 2 页。
Return 到第 1 页，单击弹出按钮 -- 没有任何反应。

我认为问题出在 Turbolinks 上。根据我的阅读，因为 Turbolinks 使用 Ajax 呈现 HTML 而不是重新加载页面，它有时会影响 Jquery 的运行方式。我已经通读了描述其工作原理的 Turbolinks 文档，并遵循了他们的建议。我也浏览过似乎每个博客 post 都描述了类似的问题，但我尝试过的任何东西都没有太大的不同。还有其他一些与此类似的 SO 问题，但许多解决方案都是在新版本的 Turbolinks 发布之前提出的，而新版本并没有解决我的问题。

这是相关代码。

Html 可见

  <a data-popup-open="popup-2" href="#">Open popup</a>

  <div class="popup" data-popup="popup-2">
    <div class="popup-inner">
      <div class="popup-content">
         .
         .
         .
        <button data-popup-close="popup-2" href="#">Close popup.</button>
      </div>
    </div>
  </div>

Application.js

//= require jquery
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .

Custom.js 文件。

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

//----- OPEN
$('[data-popup-open]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-open');
$('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
e.preventDefault();
});
//----- CLOSE
$('[data-popup-close]').on('click', function(e)  {
var targeted_popup_class = jQuery(this).attr('data-popup-close');
$('[data-popup="' + targeted_popup_class + '"]').fadeOut(350);
e.preventDefault();
});

});

起初我把代码包裹在document.ready中。在发现问题与 turbolinks 有关后，我按照他们的文档将 Jquery "$(document).ready..." 替换为 "$(document)on('turbolinks:load'... " 问题仍然存在，但现在开发人员控制台在返回第一页并单击弹出窗口后显示未捕获的类型错误（如下所示）。

site-wide.self-ef6....js?body=1:5 Uncaught TypeError: $ is not a function
  at HTMLDocument.<anonymous> (site-wide.self-ef6....js?body=1:5)
  at HTMLDocument.dispatch (jquery.self-bd7d....js?body=1:5227)
  at HTMLDocument.elemData.handle (jquery.self-bd7d....js?body=1:4879)
  at Object.Turbolinks.dispatch (turbolinks.self-2db6e....js?body=1:6)
  at e.notifyApplicationAfterPageLoad (turbolinks.self-2db6e....js?body=1:7)
  at e.visitCompleted (turbolinks.self-2db6ec....js?body=1:7)
  at e.complete (turbolinks.self-2db6ec....js?body=1:6)
  at e.<anonymous> (turbolinks.self-2db6ec....js?body=1:6)
  at turbolinks.self-2db6ec....js?body=1:6

在这一点上，我似乎只是在尝试一些随机的事情来让它工作。我将不胜感激关于我做错了什么的建议以及如何解决它的指导。

编辑：作为事后的想法，提及我已经包含 bootstrap 但我将要删除它可能是相关的。弹出窗口不是用 bootstrap 制作的，我不想要 bootstrap 解决方案。

Answer 1

发布我的解决方案。

你不应该替换

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

和

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

代码还需要封装在一个jQuery函数中，所以一起使用吧。

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

//----- Your JS code here.

});
});

关于这个问题的答案。

Answer 2

当 jQuery 加载两次时可能会发生此错误。

检索新内容时，Turbolinks only loads scripts it hasn't seen before，所以问题可能是 jQuery 在两个不同的文件中定义。

另一种可能性是，在应用程序代码的某处，$ 被指向其他内容。如果是这种情况，（假设 jQuery 也没有被重新定义）"bandaid" 修复可能是在 Custom.js 前面加上：

var $ = jQuery;

参见：loading jquery twice causes an error?

Answer 3

您可以将 <%= javascript_include_tag .... %> 放在关闭正文 (</body>) 标签之前，而不是放在 <head> 标签中。如下所示。

  <%= javascript_tag 'application.js', data-turbolinks-track" => true %>
</body>

如果不进行硬刷新，我的 Rails 应用将不会加载 Jquery 弹出窗口

My Rails app won't load a Jquery popup without a hard refresh

javascript

jquery

ruby-on-rails

turbolinks