JQuery .on('Click') 只工作一次，不工作多次

Question

目前我正在尝试为我的网站制作一个带有计数器的"赞"按钮。我遇到的问题是，我不太精通javascript和AJAX，并且不知道如何正确编写AJAX请求。

Ajax 请求确实有效，并且确实添加了类似内容(删除也有效(，但是如果我想再次单击相同的喜欢或不喜欢，我必须刷新页面。我不能一直点击喜欢和不喜欢。(希望这是有道理的(。

这是我的J查询

$(document).ready(function(){
$('.post-add-icon').on('click', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/addlike.php',
type: 'post',
data: {
'likes': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);

}
});
});
});
</script>
<script>
$(document).ready(function(){
// when the user clicks on unlike
$('.post-add-icon-active').on('click', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/removelike.php',
type: 'post',
data: {
'unliked': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);
}
});
});
});

这是添加的.php

require_once("../../config/db.php");
include_once("../classes/user.php");
include_once('../classes/posts/likes.php');
include_once('../classes/posts/comments.php');
include_once('../classes/posts/shares.php');
if(isset($_POST['likes'])) {
$id_post = $_POST['id_post'];
$id_user = $_SESSION['id_user'];
$likeTotal = mysqli_query($conn, "SELECT * FROM likes where id_post='$id_post'");
$likeTotalResult = mysqli_num_rows($likeTotal);
$likeTotalPerUser = mysqli_query($conn, "SELECT * FROM likes WHERE id_user='$id_user' AND id_post='$id_post'");
$likeTotalPerUserResult = mysqli_num_rows($likeTotalPerUser); 
if($likeTotalPerUserResult > 0) {
$likes = new Likes($conn, $id_user);
$likes->loadLikes($id_post, $id_user);
$likesPictures = new Likes($conn, $id_user);
$likesPictures->loadLikerPictureArray($id_post, $id_user);
$staticCommentCountDisplay = New Comments($conn, $_SESSION[id_user]);
$staticCommentCountDisplay->DisplayCommentsTotal($id_post);
$staticShareCountDisplay = New Shares($conn, $_SESSION[id_user]);
$staticShareCountDisplay->DisplayShares($id_post);
exit();
} else {
mysqli_query($conn, "INSERT INTO likes (id_user, id_post, liked) VALUES ('$id_user', '$id_post', '1')");
$likes = new Likes($conn, $id_user);
$likes->loadLikes($id_post, $id_user);
$likesPictures = new Likes($conn, $id_user);
$likesPictures->loadLikerPictureArray($id_post, $id_user);
$staticCommentCountDisplay = New Comments($conn, $_SESSION[id_user]);
$staticCommentCountDisplay->DisplayCommentsTotal($id_post);
$staticShareCountDisplay = New Shares($conn, $_SESSION[id_user]);
$staticShareCountDisplay->DisplayShares($id_post);
exit();
}                               
}

这是展位添加和删除喜欢的响应。

if(mysqli_num_rows($hasUserLiked) > 0){
echo $likeEcho = '<div class="post-additional-info inline-items" id="likeUpdate-'. $id_post .'">
<span id="likeUpdate'. $id_post .'"><a style="cursor:pointer" class="post-add-icon-active inline-items" id="' .$id_post. '" data-id="' .$id_post. '">
<svg class="olymp-heart-icon">
<use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
</svg>
<span class="likes_count" id="' .$id_post. '">' .$totalLikes. '</span>
</a>
</span>';
} else { 
echo $likeEcho = '<div class="post-additional-info inline-items" id="likeUpdate-' . $id_post . '">
<span id="likeUpdate'. $id_post .'"><a style="cursor:pointer" class="post-add-icon inline-items" id="' .$id_post. '" data-id="' .$id_post. '">
<svg class="olymp-heart-icon">
<use xlink:href="svg-icons/sprites/icons.svg#olymp-heart-icon"></use>
</svg>
<span class="likes_count" id="' .$id_post. '">' .$totalLikes. '</span>
</a>
</span>';
}
} 

最后，这是我的脚本切换，位于我的帖子循环的开头。

<script>
function toggle<?php echo $row['id_post']; ?>() {
var element = document.getElementById("toggleComment<?php echo $row['id_post'];?>");
if (element.style.display == "block") 
element.style.display = "none";
else
element.style.display = "block";
}
</script>

希望这是足够的信息。就像我最初说的，如果用户单击一次喜欢按钮，它会显示正确的相应响应。但是，如果用户随后决定再次单击同一按钮(由于响应，它显示为新按钮(，则它不会执行任何操作。jquery 切换是否需要随响应重新加载？

Answer 1

我相信您发送以下内容实际上是谎言：

'likes':'1'

这意味着您始终将喜欢设置为 +1。 您根本不应该发送喜欢的数量。你应该只发送类似"喜欢"的东西，你的后端应该做类似的事情

previousNumberOfLikes++ // increment by 1.

你永远不应该接受来自前端的这种值，因为它很容易纵。

最好

编辑：

我可能弄错了。你回来totalLikes.这可能是问题所在。如果您总是发送总赞而不增加它，它永远不会改变。也许可以研究一下。

Answer 2

您正在生成新的post-add-icon，因此它不在$(document).ready()上，请尝试不要替换像图标

Answer 3

我认为您需要解绑事件，请关注官方jquery网站： https://api.jquery.com/die/

Answer 4

你只需要写一次document.ready函数，而不是多次。 将所有函数放在里面document.ready如下所示：

<script>
$(document).ready(function(){
$('.post-add-icon').on('click', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/addlike.php',
type: 'post',
data: {
'likes': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);

}
});
});

// when the user clicks on unlike
$('.post-add-icon-active').on('click', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/removelike.php',
type: 'post',
data: {
'unliked': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);
}
});
});
});
</script>

Answer 5

试试这个！

<script>
$(document).ready(function(){
$('body').on('click','.post-add-icon', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/addlike.php',
type: 'post',
data: {
'likes': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);

}
});
});

// when the user clicks on unlike
$('body').on('click','.post-add-icon-active', function(){
var id_post = $(this).data('id');
$post = $(this);
$.ajax({
url: 'includes/handlers/removelike.php',
type: 'post',
data: {
'unliked': 1,
'id_post': id_post
},
success: function(response){
$('#likeUpdate-'+id_post).replaceWith(response);
}
});
});

}(;