$(document).ready(function() { Rails Turbo-links答案

【问题标题】：$(document).ready(function() { Rails Turbo-links$(document).ready(function() { Rails Turbo-links
【发布时间】：2013-11-04 08:31:08
【问题描述】：

使用 turbo-links 运行时遇到问题...

$(document).ready(function() {
 var n = '#nav', no = 'nav-open';
  $('#nav-menu').click(function() {
    if ($(n).hasClass(no)) {
        $(n).animate({height:0},300);
        setTimeout(function(){
            $(n).removeClass(no).removeAttr('style');
        },320);
    }
    else {
        var newH = $(n).css('height','auto').height()
            ;
        $(n).height(0).animate({height:newH},300);
        setTimeout(function(){
            $(n).addClass(no).removeAttr('style');
        },320);
    }
 });
});

我试过这个没有任何运气：

var ready;
ready = function() {

 ...your javascript goes here...

};

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

对不起，我对 Javascript 毫无用处！

【问题讨论】：

为什么这对你不起作用？您检查过控制台是否有错误？
您的代码有效jsfiddle.net/mr4C4
@max，问题不在于代码不起作用 - 这是因为 TurboLinks，即使您进入不同的页面，它也基本上保持加载；把 JS 搞糊涂了

标签： javascript jquery ruby-on-rails turbolinks

【解决方案1】：

在最后两行添加() 让他们执行

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

解释：ready 是一个变量，代表您定义的函数。如果你调用它的名字ready，它将返回函数定义。如果调用它执行，则需要添加()。

【讨论】：

我试过这个没有运气：var ready; ready = function() { var n = '#nav', no = 'nav-open'; $('#nav-menu').click(function() { if ($(n).hasClass(no)) { $(n).animate({height:0},300); setTimeout(function(){ $(n).removeClass(no).removeAttr('style'); },320); } else { var newH = $(n).css('height','auto').height() ; $(n).height(0).animate({height:newH},300); setTimeout(function(){ $(n).addClass(no).removeAttr('style'); },320); } }); }; $(document).ready(ready()); $(document).on('page:load', ready());
@owenob1，我分叉了 Max 的小提琴并根据新结构进行了修改。它在 jQuery 的就绪下工作。 jsfiddle.net/billychan/4Zgug
请不要说这在带有 TurboLinks 的 Rails 中不起作用，它只是在您的特定项目中不起作用。我有类似的方法效果很好。另外，请不要只是说它不起作用，这里没有人可以访问您的项目并且可以为您调试，遇到问题时轮到您提供具体的错误消息。

【解决方案2】：

据我了解，我建议您使用 jQuery-Turbolinks，这是您安装的一个 gem，可以让 JS 与 Turbolinks 一起使用

我们和你自己也有类似的问题，因为我们有

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

它不会触发——它是由 Turbolinks 加载文档一次，然后欺骗 JS 认为它没有重新加载引起的

我会尝试安装 gem 并查看它是否有效：

宝石文件：

gem 'jquery-turbolinks'
Add it to your JavaScript manifest file, in this order:

//= require jquery
//= require jquery.turbolinks
//
// ... your other scripts here ...
//
//= require turbolinks

【讨论】：

jquery.turbolinks 不应用于新代码 - 它是使用新的 turbolinks 框架制作现有遗留代码的包装器。
那么你应该围绕 turbolinks 编写新代码，而不是把这个 hack 放进去。
好的，谢谢！下次我会记住这一点。但是，我贡献了我的修复，我认为这将有助于直接解决 OP 的问题