为什么我在AJAX提交后收到双重回复？

Question

我正在尝试为我的博客做一个评论回复系统。评论效果很好。当我第一次按下回复按钮时，它可以正常工作。如果我第二次按下它，它会使我对第二条评论的回复加倍。但是，当我在提交下一个回复之前刷新页面时，不会发生这种情况。

$(document).ready(function () {
    // When user clicks on submit comment to add comment under post
    $(document).on('click', '#submit_comment', function (e) {
        e.preventDefault();
        var comment_text = $('#comment_text').val();
        var url = $('#comment_form').attr('action');
        // Stop executing if not value is entered
        if (comment_text === "") return;
        $.ajax({
            url: url,
            type: "POST",
            data: {
                comment_text: comment_text,
                comment_posted: 1
            },
            success: function (data) {
                var response = JSON.parse(data);
                if (data === "error") {
                    alert('There was an error adding comment. Please try again');
                } else {
                    $('#comments-wrapper').prepend(response.comment)
                    $('#comments_count').text(response.comments_count);
                    $('#comment_text').val('');
                }
            }
        });
    });
    // When user clicks on submit reply to add reply under comment
    $(document).on('click', '.reply-btn', function (e) {
        e.preventDefault();
        // Get the comment id from the reply button's data-id attribute
        var comment_id = $(this).data('id');
        // show/hide the appropriate reply form (from the reply-btn (this), go to the parent element (comment-details)
        // and then its siblings which is a form element with id comment_reply_form_ + comment_id)
        $(this).parent().siblings('form#comment_reply_form_' + comment_id).toggle(500);
        $(document).on('click', '.submit-reply', function (e) {
            e.preventDefault();
            // elements
            var reply_textarea = $(this).siblings('textarea'); // reply textarea element
            var reply_text = $(this).siblings('textarea').val();
            var url = $(this).parent().attr('action');
            $.ajax({
                url: url,
                type: "POST",
                data: {
                    comment_id: comment_id,
                    reply_text: reply_text,
                    reply_posted: 1
                },
                success: function (data) {
                    if (data === "error") {
                        alert('There was an error adding reply. Please try again');
                    } else {
                        $('.replies_wrapper_' + comment_id).append(data);
                        reply_textarea.val('');
                    }
                }
            });
        });
    });
});

我尝试修改mysql中的数据库，我第一次担心它出了问题。那里一切正常。 这是我的回复系统的代码：

// If the user clicked submit on reply form...
if (isset($_POST['reply_posted'])) {
        global $conn;
        // grab the reply that was submitted through Ajax call
        $reply_text = $_POST['reply_text']; 
        $comment_id = $_POST['comment_id']; 
        // insert reply into database
        $sql = "INSERT INTO replies (user_id, comment_id, body, created_at, updated_at) VALUES (" . $user_id . ", $comment_id, '$reply_text', now(), null)";
        $result = mysqli_query($conn, $sql);
        $inserted_id = $conn->insert_id;
        $res = mysqli_query($conn, "SELECT * FROM replies WHERE id=$inserted_id");
        $inserted_reply = mysqli_fetch_assoc($res);
        // if insert was successful, get that same reply from the database and return it
        if ($result) {
                $reply = "<div class='comment reply clearfix'>
                                        <img src='profile.png' alt='' class='profile_pic'>
                                        <div class='comment-details'>
                                                <span class='comment-name'>" . getUsernameById($inserted_reply['user_id']) . "</span>
                                                <span class='comment-date'>" . date('F j, Y ', strtotime($inserted_reply['created_at'])) . "</span>
                                                <p>" . $inserted_reply['body'] . "</p>
                                                <a class='reply-btn' href='#'>reply</a>
                                        </div>
                                </div>";
                echo $reply;
                exit();
        } else {
                echo "error";
                exit();
        }
}

Answer 1

在提供的代码中，每次用户单击类为“.reply-btn”的元素时，都会为类为“.submit-reply”的元素附加一个新的单击事件处理程序。这不是一个好的做法因为它可能会导致意外的行为。 就像如果您多次单击“回复”按钮，那么当您单击“提交”时，它将提交您单击“.reply-btn”的次数。（页面刷新后）。 如下例所示

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<script>
$(document).ready(function(){
  $('.reply').click(function(){
    $('.submit').click(function(){
        alert('hi');
        })
        
  
  } 
  )
  
 
});
</script>
</head>
<body>
<button type="button" class="reply">Reply</button>
<button type="button" class="submit">Submit</button>
</body>