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元素会添加到文档中，因此不会绑定任何内容。

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

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

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

如何根据点击位置添加一个接一个的框？

1 个答案: