Question

我有一个以下列方式构建的ajax表单：

<% if @post.saved? %>
   <%= render 'shared/unsave' %>
<% else %>
   <%= render 'shared/save' %>
<% end %>

在application.js中（两者都相同）：

$(document).ready(function (){  
   $('.save_form').submit(function (){  
   $.post($(this).attr('action'), $(this).serialize(), null, "script");  
   return false;  
 });  
});

$(document).ready(function (){  
   $('.unsave_form').submit(function (){  
   $.post($(this).attr('action'), $(this).serialize(), null, "script");  
   return false;  
 });  
});

单击一次后表单正常工作，但第二次单击时重新加载页面。为什么我不能用ajax在两个表单之间切换？

共享/保存部分：

<%= form_for current_user.saved.build(:post_id=> post.id), :html => { :class => 'save_form'}, :remote => true do |f| %> 
            <div><%= f.hidden_field :post_id %></div>
            <%= image_submit_tag("save-off.png", :alt => "save", :id => "save_button", :title => "Add to Saved") %>
 <% end %>

shared / unsave partial：

 <%= form_for current_user.saved.find_by_post_id(post), :html => { :method => :delete,  :class => 'unsave_form' }, :remote => true do |f| %> 
            <div><%= f.hidden_field :post_id %></div>
            <%= image_submit_tag("save-on.png", :alt => "unsave", :id => "unsave_button", :title => "Remove from Saved") %> 
 <% end %>

Answer 1

也许包括preventDefault()？您也不需要两次定义就绪方法：

$(document).ready(function (){ 

   $('.save_form').submit(function(event){  
      event.preventDefault();
      $.post($(this).attr('action'), $(this).serialize(), null, "script");  
      return false;  
   });  

   $('.unsave_form').submit(function(event){  
      event.preventDefault();
      $.post($(this).attr('action'), $(this).serialize(), null, "script");  
      return false;  
   }); 

});

在第一次ajax调用之后，无法在没有页面重新加载的情况下在两个jquery / ajax表单之间切换

1 个答案: