开发者

Why doesn't this Rails JQuery code in application.js work?

开发者 https://www.devze.com 2023-02-11 02:31 出处:网络
Here\'s what I\'m using: application.js: $(\'#hfb\').mouseup(function(){ $(\'#hideform\').css(\'display\', \'none\');

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();
  });
});
0

精彩评论

暂无评论...
验证码 换一张
取 消