JQuery Ajax：按下“赞”按钮时，帖子的总赞数未更新答案

【问题标题】：JQuery Ajax: Total Likes not updating for post when pressing Like buttonJQuery Ajax：按下“赞”按钮时，帖子的总赞数未更新
【发布时间】：2020-04-29 14:56:34
【问题描述】：

两个 JQuery Ajax 调用。首先从 MySQL 中返回用户消息，该消息的点赞数和用户点赞该消息的按钮。此请求有效。

第二个 Ajax 请求从用户按下第一个 Ajax 请求创建的类似按钮触发。但是，按下按钮时似乎没有任何反应（没有错误）。尝试将结果作为警报或在控制台中查看，但没有任何反应。

Ajax 请求 1：

dataType: 'json',
success: function(response) {

  $.each(response, function() {
      $.each($(this), function(i, item) {
      var mycss = (item.Type == 1) ? ' style="color: #ffa449;"' :'';
      $( '.content' ).append( '<div class="post"><div class="post-text"> ' +item.MessageText+ ' </div><div class="post-action"><input type="button" value="Like" id="like_'+item.ID+'_'+item.UserID+'" class="like" '+mycss+' /><span id="likes_'+item.ID+'_'+item.UserID+'">'+item.cntLikes+'</span></div></div>');

      });
  });
}

生成的html示例：

<div class="post"><div class="post-text"> This is message example text. </div><div class="post-action"><input type="button" value="Like" id="like_1_f6khb11ldm2hek6bvs3qd2oef6" class="like"><span id="likes_1_f6khb11ldm2hek6bvs3qd2oef6">12</span></div></div>

Ajax 请求 2：

dataType: 'json',
success: function(data){
    var likes = data['likes'];
    var type = data['type'];

    $("#likes_" + postid + "_" + userid).text(likes);
    if(type == 1){
        $("#like_" + postid + "_" + userid).css("color","lightseagreen");
    }
    if(type == 0){
        $("#like_" + postid + "_" + userid).css("color","#ffa449"); 
    }
}

编辑：按要求点击第二个 Ajax 请求代码：

$(".like").click(function(){

【问题讨论】：

看来您有错字：$("#likes_" + postid + "_" + userid).text(likes);。应该是#like_。此外，在使用以下建议后，您是否看到已发送请求？
@EternalHour 谢谢。所以跨度有喜欢和按钮喜欢类名。还是我错过了理解。我已经尝试过下面的方法，但可能语法错误，因为它不起作用。我在下面的答案中尝试的代码显示在该答案下方的 cmets 中。再次感谢。
哦，我明白了，没注意到。你会提供你正在修改的外部 HTML 吗？
@EternalHour 所以有一个 div 有一个名为“content”的类，它包裹着所有的消息和点赞按钮。即它是静态的。你指的是这个吗？
是的。在这种情况下，$(".content").on("click",".like",function(){} 应该可以工作。 .content 类是否有多个元素？

标签： jquery html json ajax

【解决方案1】：

您是否尝试过回显目标？还是只是简单的警报？如果这不起作用，则意味着没有看到目标，这特别是在附加元素时。所以你需要有一个静态目标

$("#static-target").on("click",".real-target",function(){
 //do here
});

【讨论】：

谢谢。所以我有第一个 Ajax 请求，它在成功时循环通过返回的 JSON 数组并创建一个输入按钮和一些用于引用的 id 和类。附加一个额外的 ID 作为静态目标有什么帮助？请问你能建议吗？我还是个初学者。
在您的情况下，我猜想 class .content 是您的静态目标，而您迭代的成功 JSON 是真正的目标，而不是真正的 id，只要它已经存在，它也可以是类页面首次加载发生
我试过 $(".content").on("click",".like",function()，或者我应该动态指向下面的一些方法... id="like_ '+item.ID+'_'+item.UserID+'"。再次感谢。
是的，你可以使用 class .like 并且为了区分被点击的类和其他 .like 类，你使用 $(this) 代替动态 id，可以试试 $(this) .css("color":"red") 尝试查看，至于从中获取特定值，您可以使用 data-model="set value here" 并将值放在那里并利用 .data("model ") *这可以是任何单词，不限于t单词模型。获取并设置一个值以供您进一步使用
您也可以使用 value="" 和 .val() 或 id="" 和 .attr("id") 来获取特定数据，虽然这很好，但也很糟糕。因为你的数据将在 DOM 中看到，这就是为什么像 Vue.js 这样的东西出来解决这个问题