javascript - JQuery .on('Click') 只工作一次，而不是多次

问题描述

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

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

这是我的jQuery

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

这是addlike.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();
}                               
}

这是booth addlike和remove like的响应。

    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 切换是否需要重新加载响应？

标签： javascriptphpjqueryhtmlajax

javascript - JQuery .on('Click') 只工作一次，而不是多次

问题描述

解决方案

推荐阅读