0

我的应用程序中有一个最喜欢和不喜欢的功能，我正在使用 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 不会被调用。

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

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

4

2 回答 2

0

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

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

于 2010-06-03T17:45:40.777 回答