Creating a method to insert a box following another based on the location of a click

I'm currently in the process of coding a comments system that involves adding reply functionality to each comment. The goal is to have a div appear under the comment when the reply icon is clicked.

Adding comments is functioning as expected:

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

However, I'm facing an issue with adding a reply underneath the correct div:

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

Currently, clicking on the reply icon doesn't trigger any action. My objective is to display another text area input right below the specific comment and slightly offset it for better thread visibility.

How can I successfully insert a div under the div where the reply icon was clicked?

javascriptjqueryhtmlcss

Answer №1

The elements with the class name .replyIcon are dynamically added to the document after attempting to attach click event handlers to them, resulting in no binding.

Instead of directly attaching the event to these elements, bind it to a pre-existing element and delegate it to the .replyIcon class. This ensures that the desired function will be triggered even on newly-inserted .replyIcon elements:

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

(It is recommended to select a more specific location than "document" for event delegation to minimize unnecessary code execution every time the user clicks anywhere. Choose the deepest DOM node that encapsulates all reply buttons for optimal performance.)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best method for loading data into a new MongoDB database?

I currently have a Docker container set up locally with MongoDB and an express node server. Can anyone suggest the best method to add new data to this setup? 1) Should I utilize the command line interface (CLI)? 2) Is it better to use Mongoose for this ta ...

javascriptnode.jsmongodbexpressmongoose

Is the "connectToStores" method becoming obsolete in React/Flux applications?

Currently, I am in the process of constructing a small chat application using React and Flux by following a tutorial. However, it appears that the tutorial is outdated as it references a method from Alt (utilized with Flux) that triggers the following erro ...

javascriptreactjsflux

How to customize the hover and active properties of a checked checkbox in Vue 3 using Tailwind CSS and PUG?

It seems that checkboxes have a level of sophistication that I never anticipated, or perhaps my brain just can't quite grasp the nuances of checkboxes. After spending a significant amount of time researching and experimenting with checkboxes in a Vue ...

cssvue.jscheckboxpugtailwind-css

jQuery is not active on responsive designs

I have implemented a script in my JavaScript code that changes the color of the navigation bar when scrolling. The navigation bar transitions to a white color as you scroll down. However, I am facing an issue with responsiveness and would like to deactivat ...

javascriptjquerycssresponsive

The images fail to load on Mozilla browser and appear as blank spaces

My images are only displaying as white in Mozilla but fine on other browsers. I've tried using -moz without success. It's a simple fix that I can't seem to locate. Any help would be appreciated. Just a quick note, the images appear blank wh ...

htmlcssbootstrap-4

Sliding Content Loading Animation with JQuery from the Right

Is there a way to make a div slide from right to left when clicking on menu items, with an option to close it by sliding back to the right? For example, check out Does anyone have any ideas, demo links, or examples of how to achieve this effect? I came ...

jqueryajax

Display the variance in values present in an array using Node.js

I am facing a challenge and need help with printing arrays that contain both same and different values. I want to compare two arrays and print the values that are present in both arrays in one array, while also creating another array for the differing val ...

javascriptnode.jsnodes

Aligning Text and images perfectly in a DIV container, and beyond

I am trying to center or align text and images at the bottom of a couple of tags, but vertical-align doesn't seem to be cooperating. Another challenge I have is creating a horizontal menu with a start image (e.g. menutop.png), followed by a filler ( ...

csshtml

Ways to customize CSS styles for a single page?

<head> <link href="index.css" rel="stylesheet"> <style> #amor_di_mundo{ color:#ffffff; } </style> </head> <body> <div id='divL'> <div id='amor_di_mundo'>Amor di Mundo</div> <di ...

htmlcss

The art of combining CSS3 gradients with background images

I've created a function that changes the parent element's background gradient when a checkbox's status is toggled. Check out the Lorem link to see it in action! Click here to view. However, I've encountered an issue with applying this ...

jqueryhtmlcssgradient

Is the asynchronous nature of setState truly reliable?

As I delve into learning React, an interesting topic that keeps popping up is the async nature of setState. It's often mentioned that if you try to console.log(state) immediately after calling setState, it will display the old value instead of the upd ...

javascriptreactjs

Modify HTML files prior to transmission from an express server

This method comes in handy when you only have a few elements that need to be updated on your webpage, offering a seamless way to refresh the content without the need for additional HTTP requests or frontend manipulation. ...

htmlnode.jsexpress

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

Error: The node is unable to parse JSON data through the API

After loading a JSON file as a string, attempting to parse it back to JSON and send it as a response: router.get('/todos', (req,res) =>{ let todos = fs.readFile('todos.json', 'utf8',(err, data) =>{ if (err) ...

javascriptnode.jsjson

What is the best way to retrieve the ID of the input element using a jQuery object?

After submitting a form with checkboxes, I retrieve the jQuery object containing the checked input elements. var $form = $(e.currentTarget); var $inputs = $form.find("input.form-check-input:checked") Here is an example of how the inputs are stru ...

javascriptjquery

Guide to implementing 'active' state in Bootstrap 4 using JavaScript on a basic PHP website

A simple website consisting of three pages, designed using Bootstrap 4 framework. I have utilized includes to incorporate header.php and footer.php into the respective PHP pages below. My challenge lies in adding the 'active' class from Bootstrap ...

javascriptphpbootstrap-4

Optimize your HTML with Meleze.web's ASP.NET MVC 3 Razor minification and compression features

I came across meleze.web on NuGet, which claims to remove extra white spaces in generated HTML results. However, after adding the necessary configuration to my web.config file and running the application, I have not seen any changes in the result. Are th ...

asp.nethtmlasp.net-mvc-3razorminify

Error: Type Error - 'style' is not defined in the Progress Bar Project

Having recently started learning Javascript, I have been engaging with various tutorials and projects in order to gain familiarity with the language. One particular tutorial that caught my attention is a Progress-Bar tutorial by "dcode" available at this l ...

javascripthtmlcssprogress-bartypeerror

Displaying an alert on a webpage that shows a label input using JavaScript and

I'm currently working with HTML5 and JavaScript and I'm facing a challenge. I want to create a feature where users can input any word into a label, and when they click on a button, an alert is triggered with the given text. However, despite my ...

javascripthtml

Align the positioning of the dropdown menu and the input field

I'm having trouble with css and ng2-completer. I am attempting to line up the dropdown section with the input field. Unfortunately, there is no demo example provided on the page showing how to target elements using css. I've tried selecting the ...

cssangularng2-completer