Javascript 重新加载内容功能正在破坏代码
我正在制作一个评论和回复表单,对于每一条评论,回复将显示在下面,如果有任何评论,如“对不起,没有意义的评论,但我没有想法了”^D^。所以我设法让事情发展到一定程度,也就是说:我可以正常发布回复,但当我想删除回复时,我必须刷新页面,当我刷新时,我可以删除每条评论的一条回复,最多不超过一条,因为其他按钮不再点击,只有我点击的第一条按钮起作用。我通过逐行粘贴来调试代码,以查看问题何时发生,并在调用此函数时发现问题发生在代码:Javascript 重新加载内容功能正在破坏代码,javascript,jquery,ajax,Javascript,Jquery,Ajax,我正在制作一个评论和回复表单,对于每一条评论,回复将显示在下面,如果有任何评论,如“对不起,没有意义的评论,但我没有想法了”^D^。所以我设法让事情发展到一定程度,也就是说:我可以正常发布回复,但当我想删除回复时,我必须刷新页面,当我刷新时,我可以删除每条评论的一条回复,最多不超过一条,因为其他按钮不再点击,只有我点击的第一条按钮起作用。我通过逐行粘贴来调试代码,以查看问题何时发生,并在调用此函数时发现问题发生在代码:loadBoardReplies(boardCommentId) 当我删除此功
loadBoardReplies(boardCommentId)代码>
当我删除此功能时,所有按钮都正常单击并将值返回控制台,我尝试在单击功能之外使用此功能,但我发现我不能,因为我需要使用“this”来引用单击的按钮
以下是完整的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>
1) 看起来您正在动态创建元素,因此应该使用
而不是
$(".delete_board_reply_button").one("click", function(){
$(this).parent().parent().attr("id")
做
2) 我还建议您不要使用chained.parent()
查找元素,而是使用
例如,代替
$(".delete_board_reply_button").one("click", function(){
$(this).parent().parent().attr("id")
做
同样,不要使用链接的.prev()
来代替
3) 用于存储id,而不是使用奇怪的命名id
属性
您可以使用获取值。找到的解决方案
我一直在搜索,直到找到类似的问题,Mikey也给出了解决方案,但我在使用delegate()函数时犯了一个错误
谢谢你Mikey的解决方案,我明天下班后会研究一下,因为我刚到家,现在已经很晚了你好Mikey,我改了这个功能,但仍然只为一个回复工作了一次我设法删除了一个回复,不能再点击删除按钮:$('.reply\u comment\u div')。点击(“点击”,“输入”,函数(){