Introducing a fresh new feature incorporating various div elements through the power of JQuery

Why am I unable to retrieve the text of the newly added child divs? I am using JQuery to dynamically add these elements. Here is my sample fiddle: JSFIDDLE

Could someone please guide me on what mistake I made?

Javascript Code:

var counter = 0;

$("button").click(function() {

$("<div class='child-list-workorder'>\
                            <div class='list-workorder'>\
                               <div class='list-workorder-header'>\
                                 <h3 id='" + counter + "' class='list-workorder-id'>click me " + (++counter) + "</h3>\
                               </div>\
                               <p>" + counter + "</p>\
                            </div>\
                        </div>").appendTo("div.parent-list-workorder");

    });


$("div.list-workorder-header").on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});
jquerycssajaxdynamicelement

Answer №1

If you need to handle events on dynamically generated HTML elements, consider using event delegation:

$(document).on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});

In the case of dynamically generated elements with class child-list-workorder:

$(".child-list-workorder").on("click", "h3.list-workorder-id", function(){
...............

This approach will not work for dynamically generated content.

Alternatively, you can target a parent div with class parent-list-workorder that is present on DOM load:

$(".parent-list-workorder").on("click", "h3.list-workorder-id", function(){
    alert(this.id);
});

Check out this updated working fiddle for reference.

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

Retrieving information from a dynamically generated HTML table using PHP

I have successfully implemented functionality using JavaScript to dynamically add new rows to a table. However, I am facing a challenge in accessing the data from these dynamically created rows in PHP for database insertion. Below, you will find the HTML ...

javascriptphpjqueryhtmlcss

Retrieve the URL of the webpage that initiated the AJAX request within the AJAX view

I want to access the /page/<some_id>/ from my request object in the view for /ajaxreq/, which is a different URL where my form data is being sent. Is there a way to achieve this? PS: I realize that this may be a design flaw and there are likely alte ...

jqueryajaxdjangoxmlhttprequest

Form popup that closes without refreshing the page upon submission

My goal is to make this form close when the button is pressed without refreshing the page, as Ajax code will be added later. The form functions as a pop-up, so it needs to close once the button is clicked. Currently, I can click the button without a refres ...

jqueryhtmlajaxforms

Is it necessary to convert SCSS into CSS in React?

I have a query about whether it is necessary to first compile our scss files into css and then import the css files into our react components, or if we can simply import the scss directly into the components? I've successfully imported scss directly ...

cssreactjswebpacksasscreate-react-app

What is the best way to incorporate two range sliders on a single webpage?

I recently started using rangeslider.js on my webpage. I wanted to convert two input fields into range sliders, so I began by converting one successfully. Initially, the HTML code looked like this: <div class="rangeslider-wrap"> <input type=" ...

javascriptjqueryhtmlresponsiverangeslider

Using Jquery to implement autocomplete functionality by iterating over each item with the .each

I have been attempting to implement autocomplete using the .each() function. I am referring to the documentation on http://jqueryui.com/autocomplete/. You can view my attempt in this FIDDLE link where it is currently not functioning as expected. The scen ...

jqueryhtmlautocompleteeach

condition causing jquery .ajax() to not fire

After adding a condition to my jQuery ajax() call, I noticed that it no longer fires. Specifically, I want the ajax() call to only trigger when someone presses enter in the text box. The ajax() call functions correctly without the $("[id$=txtSearch]").bin ...

jqueryasp.netajax

How can I stack two appbar components from Material Ui on top of each other without the vertical line separating them?

I am facing a challenge while trying to incorporate two AppBar components in Material-UI, stacked one on top of the other. The problem arises when a line appears at the end of the first AppBar, overlapping with the second one. Click here to view an image ...

cssreactjsmaterial-uicomponentsstyling

Unable to showcase the elements of an array within the AJAX success callback

$.ajax({ type: "GET", url: 'http://localhost/abc/all-data.php', data: { data1: "1"}, success: function(response) { ...

phpjqueryarraysajax

Customize jQuery slideDown animation to have a specific height and handle overflow situations

Below is the HTML snippet I am working with: <div class="text">bla bla bla bla</div> <div class="button">Show</div> Here is the corresponding CSS: .text{ height:100px; overflow:hidden; } Imagine the .text div contain ...

jqueryhtmlcssslidedown

Writing ajax calls to a log document

I am currently working on a single page app that relies heavily on ajax calls. One challenge I am facing is figuring out how to log these ajax calls to a single file. While I have managed to set up the logging system successfully, I am concerned about wh ...

phpajaxjquery

Utilizing jQuery to send an Ajax GET request for a JSON file

Recently I have begun delving into the world of jQuery and Ajax, attempting to utilize both technologies to retrieve a JSON FILE. Below is the structure of the file: [ { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": f ...

javascriptjqueryjsonajax

Is there a way to retrieve the present value of a dropdown menu once an ajax call is successful?

Currently, I am facing an issue where I am unable to retrieve the selected value from a dropdown menu. The logged value is always the first option in the dropdown menu, even though I have set it to a different value. Can someone help me identify what I may ...

javascriptjqueryhtmlajax

Tips for displaying specific information using Javascript depending on the input value of an HTML form

I am working on an HTML form that includes a dropdown list with four different names to choose from. window.onload = function(){ document.getElementById("submit").onclick = displaySelectedStudent; } function displaySelectedStu ...

javascripthtmlcssstringforms

Executing a void C# web method using jQuery AJAX: A step-by-step guide

Could you enlighten me on the process of invoking this particular C# web method using AJAX and jQuery? public class Default { [WebMethod] public static void Example() { //perform action } } ...

c#jqueryajaxwebmethod

Codeigniter's dynamic auto-complete feature using Ajax

Implementing AJAX Autosearch <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <script type="text/javascript"> function ajaxSearch() { alert('hello'); var input_data = $(&ap ...

phpjqueryajaxcodeigniter

Errors encountered in the ajax request, specifically 404 and 401 errors

Using jQuery's ajax method, I am submitting an ajax request in the following manner: $.ajax({ type: "PUT", url: specifiedURL, contentType: "application/json", data: JSON.stringify(data), dataType: "json" ...

javascriptajax

Can you please explain the process of converting a JSON object into a PHP variable and transferring it to a PHP script?

Is there a way to handle the json object received from an Ajax call in a PHP file instead of a js file (using jquery)? Imagine I have a phonebook table with name and phone number columns. My index file includes an input text field where users can type som ...

jqueryajax

Unable to retrieve JSON data from php script, but able to successfully retrieve it from file.json

This is the function of my PHP testing script: $json = array ( "age" => 5, "name" => "Lee", ); $json = json_encode($json); echo $json; The JSON data is successfully printed out. When I save its content in a file named file.json and read ...

phpjqueryjsonajaxtypescript

Unexpected JSON response generated by my PHP script following an AJAX request

I'm still learning and I seem to be making a mistake somewhere. I have a PHP result set that I need to iterate through, like this: $rows = array(); while($r = mysql_fetch_assoc($result)) { $rows[] = $r; } echo json_encode ...

javascriptjqueryajaxjson