Question

我从django后端获取“like count”，我在相应的字段中添加了正确的值。但是我需要重新加载页面才能更新值。问题是html代码包含类，而不是id，因为这个想法是有很多“类似”的帖子（比如帖子的提要）。

我尝试了不同的方法来重新加载包含类似按钮的div但到目前为止都失败了。任何想法将不胜感激！

我想在前端处理重新加载

In an assignment  A(:) = B, the number of elements in A and B must be the same.

我附上了html代码，想象每个“卡片”作为网站上生成的每个帖子：

$(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"]);
    },
    });
});

Answer 1

我在你的代码中发现了两个问题，并且在纠正它们之后就可以了。

锚标记的类别为.like_post，而不是like_post <a class="btn .like_post" data-url"">没有触发 click活动
self.children("p")因为没有返回元素 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>

如果没有通过jquery重新加载页面来显示json数据，则无法更新div

1 个答案: