Question

以下是我正在使用的内容：

的application.js：

$('#hfb').mouseup(function(){
$('#hideform').css('display', 'none');
});

来自application.html.erb的负责人：

<head>
<title>CommentsApp</title>
<%= stylesheet_link_tag 'application', 'grid' %>
<%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" %>
<%= javascript_include_tag  "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" %>
<%= javascript_include_tag "jquery-rails.js" %>
<%= javascript_include_tag "application.js" %>

<%= csrf_meta_tag %>
</head>

我要隐藏的东西：

<a href="" id="hfb">Hide Form</a>
<div id="hideform">
<% form_for Comment.new, :remote => true do |f| %>
#form stuff
<%= f.submit "Add comment" %>
<% end %>
</div>

我在这里缺少什么？

Answer 1

我不确定你为什么尝试使用mouseup，我只是使用click（）并隐藏（）

$(document).ready(function() {
  $('#hfb').click(function(){
    $('#hideform').hide();
    return false;
  });
});

它也可能正在重新加载页面，因此从处理程序返回false是个好主意。

编辑 idlefingers也有一个好主意。在文档准备好之前，您无法运行处理程序。

Answer 2

您需要在js中使用$(document).ready。此外，您可以使用jQuery的“隐藏”方法，而不是明确地更改css（这是所有隐藏的 - 它只是读取更小的更好）：

$(document).ready(function() {
  $('#hfb').mouseup(function(){
    $('#hideform').hide();
  });
});

为什么application.js中的这个Rails JQuery代码不起作用？

2 个答案: