【发布时间】：2021-12-27 20:45:48
【问题描述】：
页面有cmets和replies，类似于Youtube。发布新评论可以正常工作，但回复评论时失败。
我在目标textarea 中使用console.log 进行了测试，如果您只回复一条评论，它可以正常工作，但如果我尝试切换我要回复的评论，textarea 的值为空。除了第一个 cmets 回复 textarea，不知何故，一个总是有效的。
我是否需要以某种不同的方式重置之前提交的表单，或者我还缺少什么？
$(document).ready(function() {
var id = $('#post_id').val();
$.ajax({
url: 'search.php',
type: 'POST',
data: {
allcomments: id
},
dataType: "html",
error: function() {
alert("Jokin meni vikaan");
},
success: function(data) {
$('.discussion-section').append(data);
tinymce.remove();
initializeTinyMce('textarea');
}
});
$('.discussion-section').on('submit', '.form-reply, #comment', function(e) {
e.preventDefault();
var comment = $('#topic').val();
var post_id = $('#post_id').val();
var comment_id = $(this).find('#comment_id').val();
if (!isReply) {
var comment = $('#topic').val();
} else {
var comment = $(this).find('#reply-topic').val();
}
$.ajax({
url: "search.php",
method: "POST",
data: {
comment: comment,
id: post_id,
comment_id: comment_id,
isReply: isReply
},
dataType: "text",
success: function(message) {
message = $.parseJSON(message);
$('.error-txt').stop().show();
$('.error-txt').html(message.output);
$('.error-txt').stop().delay(1000).fadeOut("fast");
$('.comment-amount').html(message.amount + ' kommenttia');
if (!isReply) {
$('.post-hr').after(function() {
if ('.discussion-section:contains(".empty-room")') {
$('.empty-room').remove();
}
$("#comment")[0].reset();
return message.newComment;
});
} else {
$(".reply").text("Answer");
$(".form-reply").hide();
$(e.target).next().append(message.newComment);
}
tinymce.remove();
initializeTinyMce('textarea');
},
error: function(message) {
alert('Something went wrong');
}
});
$(this)[0].reset();
$(".reply").text("Answer");
$(".form-reply").hide();
});
这是动态加载到页面的数据
if(isset($_POST['allcomments'])) {
$stmt = $user->connect()->prepare("SELECT * FROM comments WHERE post_id = ? ORDER BY date DESC;");
if(!$stmt->execute(array($_POST['allcomments']))){
$stmt = null;
$output = "<div class='error-texti'><p>STMT FAILED</p></div>";
exit();
}
$allComments = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($allComments as $key => $userPost) {
$mysqldate = strtotime($userPost['date']);
$phpdate = date('Y/m/d G:i A', $mysqldate);
echo "<div class='discussion-wrapper'>
<div class='discussion'>
<div class='date'>
<p class='username'>" . $userPost['name'] . "</p>
<p>" . $phpdate . "</p>
</div>
<div class='bodytext'><p>" . $userPost['content'] . "</p> </div>
</div>
<button class='reply' data-id='". $userPost['comment_id'] ."'>Answer</button>
<form class='form-reply ". $userPost['comment_id'] ."' method='POST' id='reply' style='display: none; width: 80%; padding-top: 10px; padding-left: 10px;'>
<input type='hidden' id='post_id' value='". $_POST['allcomments'] ."'>
<input type='hidden' id='comment_id' value='". $userPost['comment_id'] ."'>
<textarea class='tinymce' name='content' id='reply-topic' placeholder='Kerro ajatuksistasi...' rows='7' style='z-index: 99999;'></textarea>
<div class='post-comment' style='align-self: flex-end;'>
<input type='submit' name='post' onclick='isReply = true;' onvalue='Vastaa' id='reply'>
</div>
</form>
<div class='discussion-reply'>
<div class='date'>
<p class='username'></p>
<p></p>
</div>
<div class='bodytext'> </div>
</div>
</div>";
}
}
【问题讨论】：
-
看起来你#re重复相同的id，将其更改为所有元素上的通用类
-
你指的是什么id？
-
您将事件处理程序挂钩到动态附加的 HTML 中的
#comment。我猜您正在为每个评论框重复该 id - 这就是问题所在。看看data在$('.discussion-section').append(data);中的内容会有所帮助——#comment_id、#topic、#post_id和#reply_topic也是如此。 -
Data 包含所有 cmets 的 foreach 函数并回显它们的 html 元素，即 #reply_topic（回复文本区域）和 #comment_id ，这是包含该 cmets id 值的隐藏输入。 #topic 和 #post_id 都是网页上的静态元素，所以我认为这些不是问题。
-
请复制+粘贴到问题中，不要描述它