首页 > 解决方案 > 除非我刷新页面,否则删除回复按钮只会发生 1 次

问题描述

我有一个评论表,每个评论都有回复。我设法对系统进行编程,当使用 ajax php 和 jquery 提交新评论时,评论会显示在回复列表中。现在我也在用 ajax php 和 jquery 编写删除回复按钮。发生的事情是,当我刷新页面时,我可以删除我单击的第一个删除按钮的回复评论!之后,当我单击删除以获取另一个回复评论时,没有任何反应。然后,如果我重新加载页面,我可以删除我点击的另一条回复评论,但每次刷新后不超过一条回复。我需要您的帮助才能在不刷新页面的情况下删除多个回复

我将发布 jquery 和 ajax 的代码,如果需要其他代码,请告诉我

这是我的删除按钮的 jquery 和 ajax 代码:

// Delete a reply
$('.delete_board_reply_button').click(function() {
  var deleteReplyButtonParent = $(this).attr("id");
  var idArray = deleteReplyButtonParent.split("-");
  var boardReplyId = idArray[0];
  //console.log(boardReplyId);
  var url = "widgets/delete_board_reply.php";

  $.ajax({
    url: url,
    type: "POST",
    data: {
      reply_id: boardReplyId
    },
    success: function(data) {
      // here i make a custom pop up alert
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(jqXHR);
    }
  });

  var commentId_attr = $(this).parent().parent().attr("id");
  var commentArray = commentId_attr.split("-");
  var boardCommentId = commentArray[0];
  console.log(boardCommentId);
  loadBoardReplies(boardCommentId);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 ($user_id == $_SESSION['user_id']){ 
					?>
  <a href="edit_comment_board.php?comment_id=<?php echo $reply_comment_id;?>" class="edit_comment_button_board">Edit</a>
  <input type="button" class="delete_board_reply_button" value="Delete" name="delete_board_reply_button" id="<?php echo $reply_id;?>-replyId" />
  <?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>

更新: 我对删除按钮 jquery 代码逐行粘贴进行了一些调查所以我发现当我添加这一行时会出现问题

loadBoardReplies(boardCommentId);

其中指的是这个功能:

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

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

但我现在似乎无法说出问题所在!如果我评论这一行,我可以删除我想要的任何回复,除了回复不会更新并且已删除的回复将继续出现在 DOM 中

标签: jqueryajax

解决方案


你确定吗?

var commentId_attr = $(this).parent().parent().attr("id");

它似乎$(this).parent() == <div>在那个 HTML 结构中。你试过吗?

问候


推荐阅读