3

我一直无法深入了解这一点，但有人怀疑 turbolinks 是罪魁祸首。更改菜单只是为了确保它不是一些奇怪的菜单问题。

我打开页面，单击菜单按钮 - 它工作，它打开侧面菜单，我单击菜单中的链接，然后它返回到我的应用程序。然后菜单按钮不再触发。最初当我使用 mmenu 时，它似乎缺少与 mmenu 相关的点击事件。使用 sidr，它似乎在那里，但没有任何反应。

我已经像这样设置了我的jquery

Rails 4：如何将 $(document).ready() 与 turbo-links 一起使用

示例 sidr

<a id="simple-menu" href="#sidr">Menu link</a>

<div id="sidr">
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>

树中包含的 JS 文件

var ready;
ready = function() {

    $('#simple-menu').sidr();

};

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

我已经使用 jquery turbolinks gem 设置了我的 application.js，例如

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require jquery-ui/core
//= require jquery-ui/autocomplete
//= require jquery.mmenu.min
//= require_tree .
//= require turbolinks

建议？

4

7 回答 7

2

我对 Mmenu 和 Turbolinks 有同样的问题。我已经按照 evanbikes 的描述做了。禁用 turbolinks 和 Mmenu 工作。但是当启用它时，单击菜单中的链接后它就不起作用了。其他一切正常，我们所有的 js 代码。所以这一定和 Turbolinks 有关系。

https://github.com/karlingen/rails4_mmenu

https://github.com/BeSite/jQuery.mmenu/issues/41

很想使用 Mmenu，但目前使用 Turbolinks 是不可能的。

于 2015-02-06T19:22:25.667 回答
1

尝试这个。

安装'jquery-turbolinks' https://github.com/kossnocorp/jquery.turbolinks

然后简单地

//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation

    // Make sure to add your code here
    // For example with foundation it is:


$(function(){ $(document).foundation(); });

//= require turbolinks
//= require_tree .

希望能帮助到你。至少它对我来说效果很好。

于 2015-04-25T19:48:34.630 回答
0

我正在使用 jquery.sidemenu.js，它是一个与 Turbolinks 兼容的 mmenu jQuery 插件。

https://github.com/kami30k/jquery.sidemenu.js/

于 2015-04-20T06:00:40.870 回答
0

以下是一些想法：

1）确保你的javascript包含在头部而不是身体的底部。由于 Turbolinks 每次都会重新加载主体，因此您将重新加载相同的 javascript 并可能重新初始化重复的侦听器。

2）使用 jquery.turbolinks gem，你应该只需要$(ready)而不是$(document).on('page:load', ready). 从理论上讲，这就是 jquery.turbolinks 为您所做的。

3)ready开火了吗？你放了一个console.log或alert在那里看？

4) 你是在 DOM 准备好之后通过 ajax 或其他方式加载东西吗？如果是这样，当它实际出现在页面上时，您需要.sidr()手动调用，即使它是在 DOM 准备好之后。

于 2015-01-13T03:18:12.273 回答
0

在经历了很多挫折之后，我终于发现有人在 GitHub 存储库上针对这个确切的问题提出了拉取请求。截至本答案发布时尚未合并，但它是一个快速修复，它就像一个魅力！

https://github.com/artberri/sidr/pull/183/files

于 2015-03-10T00:38:23.830 回答
0

我知道已经有一段时间了，但想为可能正在寻找的人留下更新的解决方案。

Mmenu 开发人员添加了包装器以支持各种框架，包括 turbolinks：mmenu 框架包装器

所以现在，解决这个 turbolinks 错误所需要做的就是从他们的站点或 github repo 下载最新版本的 mmenu，并在主 mmenu 文件之后包含位于 dist/wrappers/turbolinks 中的文件。

如果您手动包含它们，它将如下所示：

<script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
<script src="path/to/jquery.mmenu.wordpress.min.js" type="text/javascript"></script>

如果你使用的是链轮，像这样：

//= require jquery.mmenu
//= require jquery.mmenu.turbolinks
于 2016-03-20T21:06:08.760 回答
0

有一种方法可以解决这个问题。从 Turbolinks Doc - 选择退出 Turbolinks，您可以添加data-no-turbolink属性以禁用该特定 div 标签上的 turbolink。因此，如下修改您的代码，它将毫无问题地工作。

<div id="sidr">
<!-- Your content -->
 <ul>
  <li><a href="#">List 1</a></li>
  <li class="active" data-no-turbolink><a href="/">List 2</a></li>
  <li><a href="#">List 3</a></li>
 </ul>
</div>
于 2015-09-30T07:22:09.740 回答