我的Rails应用程序如果不进行硬刷新就不会加载Jquery弹出。
我学习了一个简单的弹出窗口，
在这里找到的演示:在这里找到的http://demos.inspirationalpixels.com/popup-modal/代码：https://inspirationalpixels.com/tutorials/custom-popup-modal/
我的问题如下：
- 登陆第一页，点击弹出式按钮--弹出打开。
- 关闭弹出并导航到第二页。
- 回到第一页，点击弹出式按钮--什么都不会发生。
我想问题是关于Turbolinks的。据我所读，因为Turbolinks使用Ajax而不是重新加载页面来呈现HTML，它有时会影响Jquery函数的方式。我阅读了Turbolinks文档，描述了它是如何工作的，并遵循了他们的建议。我也经历过似乎每一篇描述类似问题的博客文章，但我尝试过的任何东西都没有起到很大的作用。还有一些类似的问题，但很多解决方案都是在新版本的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.”加上$(文档)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在这一点上，我似乎只是在尝试一些随机的东西来让它发挥作用。我希望就我做错了什么以及如何解决它的方向提出建议。
编辑:作为事后考虑，它可能是相关的提及，我有引导包括，但我将删除它。弹出窗口不是用引导程序创建的，我不想要引导解决方案。
回答 3
Stack Overflow用户
发布于 2018-05-07 00:23:21
张贴我的解决方案。
你不应该取代
$(document).ready(function( $ ) {使用
$(document).on('turbolinks:load', function() {代码仍然需要包装在一个jQuery函数中，所以将它们一起使用。
$(document).ready(function($) {
$(document).on('turbolinks:load', function() {
//----- Your JS code here.
});
});关于jQuery隐式误差的这个问题的答案是肯定的。
Stack Overflow用户
发布于 2018-05-07 00:25:25
当加载两次jQuery时，可能会发生此错误。
当检索新内容时，Turbolinks只加载以前从未见过的脚本，所以问题可能是jQuery是在两个不同的文件中定义的。
另一种可能是，在应用程序的代码中，$被指向了其他的东西。如果是这样的话，(假设jQuery也没有被重新定义)一个"bandaid“修复可能是用以下方式在Custom.js前面加上：
var $ = jQuery;Stack Overflow用户
发布于 2018-05-07 05:06:39
您可以将<%= javascript_include_tag .... %>放在关闭主体(</body>)标记之前，而不是在<head>标记中。就像下面这样。
<%= javascript_tag 'application.js', data-turbolinks-track" => true %>
</body>https://stackoverflow.com/questions/50205342
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号