Брус переключаться между двумя Jquery/Ajax формы без перезагрузки страницы после первого вызова Ajax

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 %> 

общий/unsave частичный:

<%= 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; 
    }); 

});