如何根据点击位置在另一个之后添加一个框？

Question

我目前正在编写一个 cmets 系统。每条评论旁边都有一个回复图标。

当点击回复图标时，我想在点击回复图标的 div 下添加一个 div。

添加 cmets 可以正常工作：

<script>
    $("#submitComment").click(function() {
        var comment = $("#commentsInput").val();
        if ("<%= user.profilePic %>" == "undefined" || "<%= user.profilePic %>" == "null" || "<%= user.profilePic %>" == "") {
            $("#commentsBox").prepend("<div class='fullComment'><div class='userCommentBox'><div class='commentUsername'><%= user.username %></div><img class='userPic' src='../../../public/assets/miniProfilePic.png' /></div><div class='comment'>"+comment+"</div><img class='replyIcon' src='./../../public/assets/replyIcon.png'></div>");
        } else {
            $("#commentsBox").prepend("<div class='fullComment'><div class='userCommentBox'><div class='commentUsername'><%= user.username %></div><img class='userPic' src='https://storage.googleapis.com/gaminghub-upload/<%= user.profilePic %>' /></div><div class='comment'>"+comment+"</div><div><img class='cross' src='./../../public/assets/cross.png'><img class='replyIcon' src='./../../public/assets/replyIcon.png'></div></div>");                     
        }
    })

...但我不知道如何在正确的 div 下添加回复：

    $(".replyIcon").click(function () {
        ("<div>dfksjflsakdjfé</div>").insertAfter($(this).parent());
    })
</script>

当我点击回复图标时没有任何反应。我的目标是让另一个文本区域输入出现在相应评论的正下方，并将其向侧面移动一点，以便我们可以看到回复创建的不同线程。

如何在点击回复图标的下方添加一个 div？

Answer 1

在您尝试将点击事件绑定到这些元素后，.replyIcon 元素会添加到文档中，因此不会绑定任何内容。

相反，将事件绑定到一个确实存在的元素，并将其委托给.replyIcon；这样即使在新添加的.replyIcon 元素上也会调用您想要的函数：

$("document").on("click", ".replyIcon", function () {
    $("<div>dfksjflsakdjfé</div>").insertAfter($(this).parent());
});

（不过，最好选择一个比“文档”更具体的位置来挂起事件，因为这最终会在用户每次点击任何地方时运行一些代码。通过选择最深的 DOM 来限制溢出肯定包含所有回复按钮的节点。）