javascript - 如何根据点击位置逐个添加框？

Question

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

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

添加评论效果很好:

<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 元素会在您尝试将点击事件绑定(bind)到这些元素后添加到文档中，因此不会绑定(bind)任何内容。

相反，将事件绑定(bind)到一个确实存在的元素，并将其委托(delegate)给.replyIcon；这样，即使在新添加的 .replyIcon 元素上，您想要的功能也会被调用:

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

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