無法通過jquery更新div而無法通過jquery重新加載頁面來顯示json數據

Question

我從django後端讀取「like count」，並在相應的字段中添加了正確的值。不過，我需要重新加載頁面才能更新值。 問題是，HTML代碼包括類，而不是ids，因爲這個想法是有很多「類似」的職位（如職位提要）。

我試過不同的方式重新加載只包含像按鈕但到目前爲止失敗的股利。任何想法，將不勝感激！

我要處理的重裝在前端

$(document).on('click', ".like_post", function(e){ 
    var self = $(this); 
    $.ajax({ 
     type: 'GET', 
     url: self.data("url"), 
     dataType: 'json', 
     success: function(data) { 
      self.children("p").text(data["count"]); 
    }, 
    }); 
}); 

我附加的HTML代碼，想象每個「卡」在每個網站上產生的帖子：

<div class="card> 
<div class="card-heading"></div> 
<div class="card-body"></div> 
<div class="card-actions"> 
    <a class="btn .like_post" data-url""> 
    <ul> 
    <li><p>like count</p></li> 
    <li>like image</li> 
    </ul> 
    </a> 
    <a class="btn .share_post" data-url""> 
    <ul> 
     <li>share count</li> 
     <li>share image</li> 
    </ul> 
    </a> 
</div> 
</div> 

Answer 1

我在代碼中發現了兩個問題，並在糾正它們之後生效。

1. 錨標記在 <a class="btn .like_post" data-url"">班級爲.like_post，而不是like_post它沒有觸發 click事件
2. 沒有返回的元素，因爲 self.children()將返回直接子<ul>。因此，它 已更改爲self.find("p")。

另外補充event.stopPropagation()如果你的錨標籤有任何href元素，並確保您ajax請求返回的數據。

注意：要檢查這一點，我已經評論$.ajax代碼並使用setTimeout來模擬ajax響應等待。

$(document).on('click', ".like_post", function(e){ 
 
    e.stopPropagation(); 
 
    var self = $(this); 
 
    /*$.ajax({ 
 
     type: 'GET', 
 
     url: self.data("url"), 
 
     dataType: 'json', 
 
     success: function(data) { 
 
      self.find("p").text(data["count"]); 
 
    }, 
 
    });*/ 
 
    
 
    setTimeout(function(){ 
 
    var data = {count: 10}; 
 
    //console.log(self.children()); 
 
    self.find("p").text(data["count"]); 
 
    }, 500); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="card"> 
 
<div class="card-heading"></div> 
 
<div class="card-body"></div> 
 
<div class="card-actions"> 
 
    <a class="btn like_post" data-url""> 
 
    <ul> 
 
    <li><p>like count</p></li> 
 
    <li>like image</li> 
 
    </ul> 
 
    </a> 
 
    <a class="btn .share_post" data-url""> 
 
    <ul> 
 
     <li>share count</li> 
 
     <li>share image</li> 
 
    </ul> 
 
    </a> 
 
</div> 
 
</div>