AJAX第二次通話不起作用

Question

我正在嘗試做一個簡單的投票按鈕，但每次重新加載后每個帖子只能使用一次。

運作方式：按一下[+]->更新查詢（在django中）->重新載入div（將“ +”變更為“-”）->允許按一下[-]撤消upvote

第一次投票后，它顯示“-”按鈕，但是當我單擊它時，什么也沒有發生。 僅當我按“ F5”並重新加載頁面時，它才有效。

控制台中沒有錯誤。

        ... some django scripts to check which button should be displayed ...

         <span class="upvote"><span postId="{{post.id}}" class="vote" href="upvote/{{post.id}}">+</span></span>

         <span class="downvote"><span postId="{{post.id}}" class="vote" href="downvote/{{post.id}}">-</span></span>
         ...

        $(document).ready(function(){
          $(".vote").click(function(e){
          href = $(this).attr("href");
          postId = $(this).attr("postId");
          $.ajax({
                url: href,
                success: function() {
                    $("#post-"+postId+" >header").load(location.href+ " #post-"+postId+">header>*");
                },
           });
        });

正確填寫了“ postId”和“ href”屬性

Answer 1

根據您發布的代碼，問題出在哪里並不明顯，但是我猜測<span>-</span>是在您單擊<span>+</span> 之后添加到DOM的。 如果.vote這樣，那么您的問題是，僅在頁面加載首次執行該代碼時，才將$('.vote').on('click'... .vote到DOM中的.vote元素。您可以通過使用事件委托將事件處理程序綁定到靜態父元素並對來自與選擇器匹配的子代的任何事件采取行動來解決此問題：

$(document).on('click', ".vote", function(e){
    href = $(this).attr("href");
    postId = $(this).attr("postId");
    $.ajax({
       url: href,
       success: function() {
          $("#post-"+postId+" >header").load(location.href+ " #post-"+postId+">header>*");
       },
   });
})