使用Rails和jQuery的Ajax请求问题

Question

我的应用程序中有一个喜欢的和不喜欢的功能，并且我正在使用jQuery。 此功能部分起作用。 该页面已加载，并且当我单击“收藏夹”按钮（位于add_favourite_div元素内部）时，它将发送XHR请求并将帖子设置为收藏夹。 然后，一个名为“ remove_favourite_div”的新div取代了它的位置。现在，当我单击remove favourite（它是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不会被调用。

整个场景在两种情况下都是正确的，我的意思是最喜欢的->不喜欢的和不喜欢的->最喜欢的

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

Answer 1

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

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

Answer 2

这是因为DOM重载，我从许多资源中了解了它。 我正在发布一些

• http://forum.jquery.com/topic/reload-dom-after-injecting-form-elements
• http://docs.jquery.com/Events/live
• http://docs.jquery.com/FAQ#Why_do_my_events_stop_working_after_an_AJAX_request.3F
• http://www.learningjquery.com/2008/05/working-with-events-part-2
• jQuery没有看到新元素
• 在Ajax更新之后重新绑定jQuery中的事件（updatepanel）

希望能帮助到你 ：）