How to add a box after another one based on click location?

Question

I am currently coding a comments system. Each comment has a reply icon next to it.

When that reply icon is clicked, I would like to add a div under the div whose reply icon was clicked.

Adding comments works fine:

<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>");                     
        }
    })

...but I don't know how to add a reply under the correct div:

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

Nothing happens when I click on the reply icon. My goal is to make another text area input appear just underneath the corresponding comment and move it sideways a little so we can see the distinct thread that is being created by the reply.

How can I add a div underneath the one whose reply icon was clicked ?

I believe that the issue is that you're trying to attach an event listener to a non-existing element (at the time that the above script is running). Take a look at this: https://stackoverflow.com/questions/14258787/add-event-listener-on-elements-created-dynamically. — Catalyst, Jun 10 '17 at 18:20

Daniel Beck · Accepted Answer · 2017-06-10T19:11:29.313

1

The .replyIcon elements are added to the document after you try to bind click events to those elements, so nothing gets bound.

Instead, bind the event to an element that does exist, and delegate it to .replyIcon; this way the function you want will be called even on newly-added .replyIcon elements:

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

(It would be better to choose a more specific location than "document" to hang the event on, though, as this ends up running a bit of code every time the user clicks anywhere. Limit the overspill by choosing the deepest DOM node that is certain to contain all the reply buttons.)

edited Jun 10 '17 at 19:11

answered Jun 10 '17 at 18:35

Daniel Beck

20,653
5
38
53

TypeError: "
dfksjflsakdjfé
".insertAfter is not a function at HTMLImageElement – TheProgrammer Jun 10 '17 at 19:08
What is the correct syntax to specify the element to be inserted ? – TheProgrammer Jun 10 '17 at 19:09
@TheProgrammer Sorry, that bit was copied from your question; I believe it should have had a $ in front of it. I've updated the answer. – Daniel Beck Jun 10 '17 at 19:12
It works. Perfect. Sadly, I can only accept your answer and not upvote it because I don't have enough rep, but do know that I would have upvoted your answer if I could. – TheProgrammer Jun 10 '17 at 19:23
Glad I could help! – Daniel Beck Jun 10 '17 at 19:28

How to add a box after another one based on click location?

1 Answers1