重新加载内容功能正在打破代码

Question

我正在发表评论和回复表格，对于每个评论，如果有任何如this picture 所示的任何回复将显示抱歉无意义评论，但我用完了想法^ D ^。所以我设法使事情工作到某一点：我可以正常发布回复但是当我想删除回复时，我必须刷新页面，当我刷新时我可以删除每条评论1回复并且不超过1因为其他按钮不再单击，只有我点击的第一个按钮才能工作。我通过逐行粘贴来调试代码以查看问题何时发生，我发现当我将此函数调用代码时会发生这种情况：loadBoardReplies(boardCommentId);当我删除此功能时，所有按钮都正常点击并将值返回到控制台，我试图在点击功能之外采取此功能，但我发现我不能，因为我需要通过使用“这个”来引用哪个按钮被点击

这里是完整的jquery和ajax代码：

        // Delete a reply
$(".delete_board_reply_button").one("click", function(){ 

    var deleteReplyButtonParent = $(this).attr("id");
    var boardReplyIdArray = deleteReplyButtonParent.split("-");
    var boardReplyId = boardReplyIdArray[0];

    //console.log(boardReplyId);

    var parent_div = $(this).parent().parent().prev().prev().attr("id");
    //var numRepliesLink = parent_div.children("#board_num_replies");
    //console.log(parent_div);
    var url = "widgets/delete_board_reply.php";

    $.ajax({
        url: url, 
        method: "POST",
        data: {
            reply_id: boardReplyId,
            comment_id: parent_div
        },
        success: function(data){
            // here i make a custom pop up alert
            var repliesWord = "";
            if (data == 0) {
                repliesWord = "("+data+") replies";
            } else if (data == 1) {
                repliesWord = "("+data+") reply";
            } else if (data > 1) {
                repliesWord = "("+data+") replies";
            }
            $("#"+parent_div+"-board_num_replies").html(repliesWord);
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
        }
    });
    var commentIdAttr = $(this).parent().parent().attr("id");
    var commentArray = commentIdAttr.split("-");
    var boardCommentId = commentArray[0];
    console.log(boardCommentId);
    loadBoardReplies(boardCommentId);
// if i remove the line above this, if i comment it every button works fine and print the boardCommentId to the console
});

function loadBoardReplies (value) {
    var url = "widgets/board_reply_fetch.php";

    $.ajax({
        url: url, 
        method: "POST",
        data: {
            comment_id: value
        },
        success: function(data){
            $("#"+value+"-showBoardReplies").html(data);
        },
        error: function(jqXHR, textStatus, errorThrown){
            console.log(jqXHR);
        }
    });
}

这是html代码：

                    <div id="<?php echo $board_comment_id_number;?>-showBoardReplies" class="reply_comment_div_big">
                <?php 
                        $reply_data = find_board_replies_by_comment_id($comment_id);

                        while ($reply_assoc = mysqli_fetch_assoc($reply_data)) {
                            $reply_id = $reply_assoc['reply_id'];
                            $reply_comment_id = $reply_assoc['comment_id'];
                            $reply_board_id = $reply_assoc['board_id'];
                            $reply_user_id = $reply_assoc['user_id'];
                            $reply_text = $reply_assoc['reply'];
                            $reply_timestamp = $reply_assoc['reply_timestamp'];

                            $reply_user_data = find_user_data_by_id($reply_user_id);

                            if ($reply_count !== 0) {       
                    ?> 

                    <div class="reply_comment_div" id="<?php echo $reply_id;?>-boardReplyDelete">
                        <a href="profile.php?user_id=<?php echo (int)$reply_user_id;?>" class="board_comments_div_picture">
                            <img src="
                            <?php 
                                $profile_image = $reply_user_data['profile_picture']; 
                                $profile_image_thumb = "uploaded_pictures/profile/$reply_user_id/" . $reply_user_id . "small.png";

                                if ($profile_image == "") {
                                    if ($comment_user_data['gender'] == "Male"){
                                        echo "images/ProfilePicMale.png";
                                    } else {
                                        echo "images/ProfilePicFemale.png";
                                    }
                                } else {
                                    echo $profile_image_thumb;
                                }


                          ?>" width="50px" height="50px" alt="" title=""/>
                        </a>

                        <a href="profile.php?user_id=<?php echo (int)$reply_user_id;?>" class="board_comments_reply_link"><?php echo ucfirst(htmlentities($reply_user_data['first_name'])) . " " . ucfirst(htmlentities($reply_user_data['last_name']));?></a>
                    <?php 
                        if ($reply_user_id == $_SESSION['user_id']){ 
                    ?>
                        <a href="edit_reply_board.php?reply_id=<?php echo $reply_id;?>" class="edit_comment_button_board">Edit</a>
                        <input type="button" class="delete_board_reply_button" id="<?php echo $reply_id;?>-replyId" value="Delete"/>
                    <?php 
                        }
                    ?>
                        <div class="board_comment_submited_on">
                            submitted <?php echo time_of_post($reply_timestamp);?>
                        </div>
                        <span class="comment_content_span"><?php echo nl2br($reply_text);?></span>
                    </div>

                    <?php 
                            }
                        }
                    ?>
                </div>

Answer 1

1）看起来你是动态创建元素，因此你应该使用delegated event handlers。

代替

$(".delete_board_reply_button").one("click", function(){ 

做

$(document).on("click", ".delete_board_reply_button", function(){

2）我还建议你不要使用链式.parent()来查找元素，而是使用.closest(selector)代替。

例如，而不是

$(this).parent().parent().attr("id")

做

$(this).closest('.reply_comment_div_big').attr("id")

同样，而不是链接.prev()使用.sibling(selector)。

3）利用HTML5 data-attributes存储ID而不是使用奇怪的命名id属性。

您可以使用.data()获取值。

Answer 2

解决方案找到我一直在搜索和搜索，直到我找到类似的问题，以及Mikey给出解决方案，但我犯了一个错误使用委托（）函数Can't click button more than one time when append html data