クリック位置に基づいて別のボックスの後にボックスを追加するにはどうすればよいですか？

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ノードを選択して、過剰な操作を制限してください）。