Typecho 评论列表自定义导致回复报错 Cannot read property 'parentNode' of null

最近在新写的主题 acgzone 中自定义了评论列表，这中间遇到一个问题就是评论回复时，评论表单位置无法插入到当前要评论的回复下，这样的用户体验有点不好，查看了网页输出，Chrome 浏览器中一直报错 Cannot read property 'parentNode' of null ，在网上找了一圈，没有找到答案，于是自己就去研究，最初以为 jquery 库没有引用，但是尝试引用 jquery 库后仍然报错。

按报错理解，应该是找不到父节点，可是这个父节点是哪个呢？当时正好百度知道里面看过一个类似问题的回复，说到可能是 id 重复，这个回复给了我灵感，我在 Chrome 浏览器查找 id 节点，果真找到了点东西，先看一条 Typecho 回复事件的代码：

<a data-commentid="5" data-respondid="respond-post-3908" rel="nofollow" onclick="return TypechoComment.reply('comment-5', '5');">回复</a>

上面可以看出在 onclick 里面执行了一条 TypechoComent.replay 方法，这个方法里面有个 comment-5 很可能是是上面报错中提到的父节点 id ，于是我在代码里查找了一下，发现果真代码没有找到这个 comment-5 的id，又看了一下主题自定义里的调用id的地方，发现里面调用了错误的引用 <div id="comment-<?php $comments->theId(); ?>"> 这里的问题是 <?php $comments->theId(); ?> 默认输出的并不是单独 id 而是输出的内容就是 comment-id ，所以上面错误引用输出的结果就是 comment-comment-id 。于是把上面错误引用更改为 <div id="<?php $comments->theId(); ?>"> 即可。

延伸思考，因为上面评论默认回复引用代码为：<span class="comment-reply"><?php $comments->reply($singleCommentOptions->replyWord); ?></span> 这里是用系统自己的回复方法，所以如果想要自定义自己的方法，这样也能解决上面的问题，并且可以自定义父类的 id 而不是使用默认的 comment-id，自定义的方法如下：

<div class="reply" id="comment-reply-<?php echo $comments->coid;?>">
<a data-commentid="<?php echo $comments->coid;?>" data-respondid="<?php echo $comments->parameter->respondId;?>" rel="nofollow" onclick="return TypechoComment.reply('<?php echo $comments->theId; ?>', '<?php echo $comments->coid;?>');">回复</a>
</div>

其中 onclick 事件改成自己定义，也就能调用 TypechoComment.replay 时，自定义传入的参数 id 。

这个问题确实困扰了很久，不过现在总算折腾出来了，记录一下希望帮助到大家！