Javascript fadeToggle（）不尊重HTML中的层次结构

我正在尝试使用我博客评论部分中的fadeToggle（）打开现有评论的回复表单。最初，我在CSS中使用

display:none

来隐藏注释列表和表单。fadeIn/Out操作应通过单击“回复”链接来执行。然而，当我点击回复时，我会直接进入页面顶部，淡入淡出效果不会生效。我查看了html中的层次结构，以确保fadeToggle函数将重定向到正确的类，但即使如此，还是有一些不正确的地方

html

{% for comment in comments %}
<blockquote class="blockquote">
  <p>{{ comment.content }}</p>
  <footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} ago |
    {% if comment.children.count > 0 %}{{ comment.children.count }} comment{% if comment.children.count > 1 %}s
    {% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Reply</a>
  </footer>
  <div class="comment-reply">
    {% for child_comment in comment.children %}
    <blockquote class="blockquote">
      <p class="mb-0">{{ child_comment.content }}</p>
      <footer class="blockquote-footer">Por: {{ child_comment.user }} |
        {{ child_comment.timestamp|timesince }}
        ago
      </footer>
    </blockquote>
    {% endfor %}
    {% if request.user.is_authenticated %}
    <form action="" method="POST">
      {% csrf_token %}
      {{ comment_form|crispy }}
      <input type="hidden" name="parent_id" value="{{ comment.id }}">
      <input class="btn btn-secondary" type="submit" value="Reply">
    </form>
    {% else %}
    <p>You must login to reply</p>
    {% endif %}
  </div>
</blockquote>
{% endfor %}

js

.comment-reply {
  display: none;
}

<script type="text/javascript">
    $(document).ready(function () {
      $(".comment-reply-btn").click(function (event) {
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
      })
    })
</script>

$（文档）.ready（函数（）{
$（“.comment-reply-btn”）。单击（函数（事件）{
event.preventDefault（）；
$（this.parent（）.next（“.comment reply”）.fadeToggle（）；
})
})

您可以添加html而不是代码吗？为了调试您的问题，这个部分已经足够了。JS的方法出了问题。检查浏览器开发工具的控制台是否有错误。当我单击“答复”时，我会直接进入页面顶部-听起来好像你的“答复”正在提交表单。您正在单击哪个“回复”按钮？有两个

。A将帮助我们帮助您。@freedomn-m我指的是标签中的第一个回复。如果您在加载页面后用

.comment reply btn

加载代码（如通过ajax请求），则需要事件委派。加载页面后，是否使用

.comment reply btn

加载代码？