PHP + AJAX + jQuery 评论/回复系统在拉取第一个回复后停止工作答案

【问题标题】：PHP + AJAX + jQuery comment/reply system stops working after first reply is pulledPHP + AJAX + jQuery 评论/回复系统在拉取第一个回复后停止工作
【发布时间】：2013-01-28 15:17:50
【问题描述】：

基本上，我有一个评论系统，我正在尝试添加 AJAX/jQuery 支持，以便用户可以查看“回复”cmets，类似于 Youtube 处理 cmets 和回复的方式。

显示与文章关联的每条评论 (comment_view.php)，如果是对另一条评论的回复，则会显示一个按钮，用户可以单击该按钮来查看其回复的评论。

最初的评论显示正常，然后单击“回复”按钮时，回复也按预期显示！但是，当从刚刚返回的回复中单击下一个“回复”按钮时，什么也没有发生。

另一个奇怪的事情是，如果我去掉回复 div 上的style="display: none;"，它似乎可以工作，并且一直拉动所有的“回复”，尽管没有 jQuery“显示”动画。

对这里发生的事情有什么想法吗？

总共涉及3个文件：article.php、comment_view.php和getreply.php，详述如下：

article.php (sn-p)

此文件访问数据库并提取一篇文章及其关联的 cmets

foreach ($comments as $comment) {
    echo '<div id="comment'.$comment['id'].'" class="comment">';
    require 'comment_view.php';
    echo '</div>';
}

comment_view.php

article.php（上）和 getreply.php（下，使用 AJAX 从下面的 JavaScript 中获取）都包含此文件

$_SESSION['rnum']++; //session variable that gets incremented to make sure each reply div id is unique

if ($comment['reply_to_id'] != null) {
    echo '<div id="reply'.$_SESSION['rnum'].'" style="display: none;"></div>'; //empty/hidden div to hold the future contents of a reply, which ends up being this file, instantiated by getreply.php (below) with a new $comment from database
}

echo '<div class="content">';
echo nl2br($comment['content']);
if ($comment['reply_to_id'] != null) {
    echo '<br/><button id="showreply'.$_SESSION['rnum'].'" onclick="showReply('.$comment['reply_to_id'].','.$_SESSION['rnum'].'); this.disabled = true;">In reply to -> '.$comment['reply_to_id'].'</button>';
    echo '<script>$("#showreply'.$_SESSION['rnum'].'").click(function () { $("#reply'.$_SESSION['rnum'].'").show("slow"); });</script>';
}
echo '</div>'; //content

JavaScript（位于 article.php 的头部）

此 AJAX 函数获取 comid（评论 ID）并将其传递给 getreply.php，以便它知道要从数据库中提取哪个回复。还需要 rnum 找出回复 div 的唯一 ID 来替换其中的内容。

<script>
function showReply(comid,rnum) {
    if (comid=="") {
        document.getElementById("reply"+rnum).innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {
        // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {

            document.getElementById("reply"+rnum).innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","getreply.php?id="+comid,true);
    xmlhttp.send();
}
</script>

getreply.php

这个文件使用 AJAX 传递的 comid（评论 ID）从数据库中提取回复评论，然后重新调用 comment_view.php（然后应该为下一个潜在回复生成另一个新的唯一 rnum，并吐出评论)

session_start();

$query = "SELECT * FROM comments WHERE id = ".$_GET['id'];
$result = $mysqli->query($query) or die($mysqli->error. " [" . __LINE__ . "]");

if ($result->num_rows == 1) {
    $comment = $result->fetch_assoc();
    require 'comment_view.php';
}

这比我预期的要长一点，但在此先感谢您的帮助或想法...

【问题讨论】：

第一个问题，为什么不在整个应用程序中使用 JQuery？其次，如果在设置响应文本并将其设置为 $("#reply"+rnum).show("slow"); 之后更改/移动 $("#reply'.$_SESSION['rnum'].'").show("slow"); 会发生什么情况，这样每个按钮就没有两个冲突的 click 方法，并且它不会显示它直到它包含文本。 ^^
@Jon 感谢您的回复。我应该将 .show() 脚本移动到哪里？我不确定您所说的“设置响应文本后”是什么意思回答您的第一个问题：我仍然是初学者，正在尝试学习 jQuery - 并且觉得它在这种情况下会很有用:)
将它放在document.getElementById("reply"+rnum).innerHTML=xmlhttp.responseText; 之后并删除.click 事件以查看是否有效。 ^^
@Jon Holy 废话！你是男人！请把它作为答案，以便我可以选择它:) 再次感谢...不知道点击事件是冲突的，但这很有意义！
不客气！很高兴我能提供帮助。 ^^ 根据您的要求回答。 ^^

标签： php javascript jquery ajax

【解决方案1】：

根据要求，以答复形式 ^^

您需要删除添加到每个回复中的.click 脚本，而是在您的代码中将$("#reply"+rnum).show("slow"); 放在document.getElementById("reply"+rnum).innerHTML=xmlhttp.responseText; 之后。发生这种情况的原因是有两个与按钮关联的click 事件，它们相互冲突。此外，在收到回复后放置它是一种很好的做法，这就是为什么 .show 会显示一些内容，而不是在收到回复之前显示空的 div。

【讨论】：

【解决方案2】：

在您使用的第一个 sn-p 中

require 'comment_view.php';

这适用于一条评论。一旦你有第二条评论，它应该会抛出一个错误，因为 comment_view.php 已经是必需的。改成

require_once 'comment_view.php';

看看它现在是否有效。

【讨论】：