Ruby on rails 3.1 在rails 3.1应用程序中使用Jquery.toggle

Ruby on rails 3.1 在rails 3.1应用程序中使用Jquery.toggle,ruby-on-rails-3.1,jquery,Ruby On Rails 3.1,Jquery,我一直在尝试让Jquery的.toggle功能在rails 3.1应用程序中工作,这样用户就可以单击链接来显示或隐藏他们正在查看的页面上的内容 我尝试复制的功能与此处显示的示例相同: 然后,该视图具有以下代码: $('#button').click(function(){ $('.cell').toggle(); }); <table> <tr> <td class="cell" style="display: none"> Some info </

我一直在尝试让Jquery的.toggle功能在rails 3.1应用程序中工作,这样用户就可以单击链接来显示或隐藏他们正在查看的页面上的内容

我尝试复制的功能与此处显示的示例相同:


然后,该视图具有以下代码:

$('#button').click(function(){
$('.cell').toggle();
});
<table>
<tr>
<td class="cell" style="display: none">
Some info
</td>
<td class="cell">
Other info
</td>
</tr>
</table>
<input type="button" id="button" value="Show/hide" />

一些信息
其他信息
当我加载页面时,按钮会与“其他信息”一起显示,但当我单击按钮时,它不会执行任何操作,也不会发生任何更改。当我检查页面的源代码时,它肯定会在页眉中包含我的users.js文件

由于某些原因,javascript代码不会执行切换并更改页面内容。我不知道这是否是Rails 3.1的问题。使用一个小型独立应用程序,当我在页面底部手动包含脚本时,此功能可以正常工作,如:

<script>

$("#button").click(function(){
$(".cell").toggle();
});

</script>

$(“#按钮”)。单击(函数(){
$(“.cell”).toggle();
});
关于jquery代码或rails配置的错误有什么想法吗


谢谢你的帮助

标记和js代码是可靠的,应该可以工作

打开javascript控制台,查看产生了哪些错误。jQuery正在rails布局中加载吗?

试试看

$("#button").live('click', function(e){
  $(".cell").toggle();
});

我遇到了同样的问题,看起来users.js文件引用的是DOM中尚未加载的元素。将JavaScript放在底部可以解决这一问题,但使用似乎可以使代码即使放在.js文件中也能正常工作

将其放入您的users.js文件中,看看它是否解决了问题:

$(document).ready(function(){
    $('#button').click(function(){
        $('.cell').toggle();
    });
});
您也可以使用CoffeeScript(users.js.coffee)实现这一点:


谢谢-值得一试,但没用。当我查看web控制台的错误时,我看到$(“button”)为null-但不确定为什么它会被计算为null。它还说“效果未定义”和“原型”未定义。但我很确定它正确地加载了Jquery,因为它是从我的rails资产文件夹加载的文件之一。还有其他想法吗?错误用法它不是$(“按钮”),请使用$(“按钮”)或$(“输入按钮”)@Chris做对了上面的评论-似乎$(“按钮”)是空的。你知道那意味着什么吗?是否由于某种原因无法在我的页面上找到“button”属性?请尝试使用
而不是
id
,并尝试将
按钮
重命名为
我的按钮
。有时候奇怪的复制和粘贴错误会悄悄地出现在你身上。您肯定是在使用jQuery,而不是Prototype吗?在控制台中键入
$().jquery
,查看加载的版本。您好-再次感谢您的帮助。我相信这个问题是由我从rails 3.0应用程序复制过来的一些遗留文件引起的——即prototype.js、effect.js、controls.js和dragdrop.js。。。他们似乎破坏了页面上的功能。我从assets/javascripts文件夹中删除了它们,现在一切似乎都正常了。再次感谢你的帮助!太棒了,卡姆!确保投票或接受对你有帮助的答案。
$(document).ready(function(){
    $('#button').click(function(){
        $('.cell').toggle();
    });
});
$(document).ready ->
    $('#button').click ->
        $('.cell').toggle()