使用 Rails 和 jQuery 问题的 Ajax 请求答案

【问题标题】：Ajax Request using Rails and jQuery Problem使用 Rails 和 jQuery 问题的 Ajax 请求
【发布时间】：2011-02-27 10:31:27
【问题描述】：

我的应用程序中有一个最喜欢和不喜欢的功能，我正在使用 jQuery。此功能部分工作。页面被加载，当我点击“收藏夹”按钮（它位于 add_favourite_div 元素内）时，它会发送一个 XHR 请求并将帖子设置为收藏夹。然后一个名为“remove_favourite_div”的新 div 替换了它的位置。现在，当我单击删除收藏夹（它是 remove_favourite_div 的一部分）时，它会在 xhr 内发送一个正常的 http 请求。

页面第一次加载时的结构

<div id="favourite">        
  <div id="add_favourite_div">
     <form method="post" id="add_favourite" action="/viewpost/add_favourite">
       <div style="margin: 0pt; padding: 0pt; display: inline;">
            <input type="hidden"  
             value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" 
             name="authenticity_token">
       </div>
       <input type="hidden" value="3" name="Favourite[post_id]" 
        id="Favourite_place_id">
       <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
       <input type="submit" value="Favourite" name="commit"><br>
      </form>
  </div>
</div>

点击不喜欢的按钮后的DOM

<div id="favourite">
  <div id="remove_favourite_div">
    <form method="post" id="remove_favourite" action="/viewpost/remove_favourite">
       <div style="margin: 0pt; padding: 0pt; display: inline;">
          <input type="hidden" value="w873BgYHLxQmadUalzMRUC+1ql4AtP3U7f78dT8x9ho=" 
          name="authenticity_token">
       </div>   
       <input type="hidden" value="3" name="Favourite[post_id]" id="Favourite_place_id">
       <input type="hidden" value="2" name="Favourite[user_id]" id="Favourite_user_id">
       <input type="submit" value="UnFavourite" name="commit"><br>  
    </form>
  </div>
</div>

在我的 application.js 中，我有两个函数来触发 xhr 请求

$("#add_favourite").submit(function(){
        alert("add favourite");
        action = $(this).attr("action")
        $.post(action,$(this).serialize(),null,"script");
        return false;
    });

$("#remove_favourite").submit(function(){
        alert("remove favourite");
        action = $(this).attr("action");
        $.post(action,$(this).serialize(),null,"script");
        return false;
    });

在这里，当帖子最初不是收藏夹时，会显示收藏夹按钮，当我单击该按钮时，会调用 $("#add_favourite").submit 并正确显示不喜欢的表单，但现在当我单击不喜欢的按钮 $("#remove_favourite").submit 不会被调用。

整个场景在两个方面都是正确的，我的意思是最喜欢的->不喜欢的和不喜欢的->最喜欢的

有人可以帮我解决这个问题吗谢谢

【问题讨论】：

标签： javascript jquery ruby-on-rails ajax ajax-on-rails

【解决方案2】：

我没有看到真正导致“remove_favourite_div”取代“add_favourite_div”的机制。如果它是动态完成的，并且在您附加了事件处理程序之后，那么问题只是您的$("#remove_favourite").submit(function(){...}); 发生在页面上没有任何此类表单之前。

在换出divs 后附加这些相同的事件处理程序，它应该可以正常工作。

【讨论】：