Why doesn't this Rails JQuery code in application.js work?
Here's what I'm using:
application.js:
$('#hfb').mouseup(function(){
$('#hideform').css('display', 'none');
});
the head from 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>
and the thing I want to hide:
<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>
What am开发者_运维百科 I missing here ?
I'm not sure why you are trying mouseup, I'd just use click() and hide()
$(document).ready(function() {
$('#hfb').click(function(){
$('#hideform').hide();
return false;
});
});
It also might be reloading the page, so returning false from the handler is a good idea.
edit idlefingers has a good idea too. you can't run the handlers until the document is ready.
You need to use $(document).ready in your js. Also, you could use jQuery's 'hide' method rather than changing the css explicitly (that's all hide does - it just reads a littler nicer):
$(document).ready(function() {
$('#hfb').mouseup(function(){
$('#hideform').hide();
});
});
加载中,请稍侯......
精彩评论