Issue with event listener not functioning properly with dynamically created content using AJAX (only using vanilla JavaScript

I used pure javascript AJAX to dynamically load content into the "test" div. However, when I try to click on a child div at index 6, an alert box is not being displayed as expected.

How can I fix the issue with the click event not working? The gets function is called once the AJAX request is complete. If I remove the event listener and replace it with directly showing an alert box, it works fine. But adding the event listener fails to bind a handler to the target div.

function gets(){
    document.getElementById("test").children[6].addEventListener("click", function() {
        alert(document.getElementById("test").children[6])
    })
}

Answer №1

A solution for this issue is to utilize event delegation.

Here is a demonstration of how it operates:

function fetch() {
  document.getElementById("example").addEventListener("click", function(event) {
    console.log(event.currentTarget.children[0])

  })

The currentTarget represents the element being clicked on, while the target refers to its parent.

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

Using the requests library in Python to simulate an AJAX request simulation

When I click on this link, you will be able to navigate to the next page and switch between viewing 50 or 100 different designs. I am attempting to use Python's requests library to make a POST request with parameters for an AJAX script that toggles b ...

Adding a fresh element to an array in Angular 4 using an observable

I am currently working on a page that showcases a list of locations, with the ability to click on each location and display the corresponding assets. Here is how I have structured the template: <li *ngFor="let location of locations" (click)="se ...

jQuery is missing an essential component that is causing an error

I have successfully implemented the following JavaScript code and everything is working fine. However, I'm uncertain if my code is fully correct. I noticed that in my script, I only utilize success: function() without incorporating an error function. ...

Utilizing HTML5 Canvas for Shadow Effects with Gradients

Surprisingly, it seems that the canvas API does not support applying gradients to shadows in the way we expect: var grad = ctx.createLinearGradient(fromX, fromY, toX, toY); grad.addColorStop(0, "red"); grad.addColorStop(1, "blue"); ctx.strokeStyle = gra ...

Getting a surprise image from the collection

I am experiencing an issue with retrieving images from an array. I have an array containing 6 variables that represent the paths to the images. However, when I use console.log at the end, it returns a random variable like sk11, sk15, etc., which do not c ...

Encountering an issue while setting up the ContextAPI in nextJS, where properties of undefined Provider cannot be read

I'm encountering difficulties in implementing ContextAPI with a nextjs application. The error message I keep receiving is: TypeError: Cannot read properties of undefined (reading 'Provider') This is my approach to creating the context: impo ...

Tips for retrieving the value of a corresponding data attribute by the text within a div using jQuery in JavaScript

I have several divs with different names and values assigned to the data attribute data-category Now, I am in need of retrieving the value of data-category based on specific text present inside the div. <div class='ext-category' data-categor ...

How to showcase an image with Angular 2?

Just starting out with Angular 2 and ran into an issue while trying to display an image using a relative path. <img src="./../images/publicVideo1.PNG"> Unfortunately, I encountered the following error: null:1 GET http://localhost:4200/null 404 (No ...

Failed to load JSON data from the factory

Recently, I started learning AngularJS and have been struggling to fetch JSON data from a factory. The error message I keep getting is not very helpful: TypeError: Cannot read property '1' of null This is the module I am working with: var app ...

The Angular ternary operator can be used in conjunction with functions for optimal

Consider this scenario: I have two functions that are triggered by a button click: <button ng-click="functionOne || functionTwo()"></button> However, I want to optimize this setup so that the functions are only called if they return a value. ...

Tips for transferring a JavaScript variable to PHP with AJAX

I am encountering an issue while trying to transfer a JavaScript variable, obtained from clicking a button, to PHP in order to execute a MySQL query. Here is my code: function ajaxCall(nodeID) { $.ajax({ type: "POST", url: "tree.php", data: {activeNode ...

Using TypeScript to define values with the placeholder "%s" while inputting an object as a parameter

One common way to decorate strings is by using placeholders: let name = "Bob"; console.log("Hello, %s.", name) // => Outputs: "Hello, Bob." I'm curious if there's a way to access specific values within an object being passed in without specif ...

Saving URI from HTTP request in Javascript using Google Drive API: A step-by-step guide

I'm struggling to understand and implement the instructions provided at https://developers.google.com/drive/v3/web/manage-uploads#save-session-uri While I've successfully used javascript to upload files to Google Drive, I am now faced with a cha ...

Learn the process of implementing multiple onClick listeners in React without deleting the existing ones

I'm facing a tricky situation with adding multiple event listeners based on different conditions. When the first condition is met, I attach a function to the click event: ref.current.onclick = ()=> {function1()} However, when the second condition ...

Retrieve a zip file using React and Node from a RESTful API

I have an application built with React and Node where I have a table that includes a download button. Clicking the download button triggers a request to my Node app, which in turn should call a REST API to download a zip file directly into the browser. In ...

Uncover the secrets of HTML with JavaScript

I'm facing an issue with extracting data from a link's data attribute and trying to decode the HTML within it, but unfortunately, it's not functioning as expected. Check out my code on JSFiddle: http://jsfiddle.net/Kd25m/1/ Here's the ...

Vue router is designed to maintain the state of child components without requiring them to

Encountering a strange problem with vue-router. Developed a simple CRUD app for managing users. The app includes four main views: User list and a create button Create view with a form child component that fetches field data from an API within the creat ...

What is the best way to customize the functionality of the Done (node-dialog-ok) button in node-red when it is

I have created a custom node and I want to trigger some specific actions when the 'Done' button (with id: node-dialog-ok) in the editor-tray-toolbar is clicked, instead of its default functionality. Is it possible to override the onclick event o ...

Obtain the Present Controller Identity within AngularJS

Currently, I am working on developing a directive that can create a grid dynamically. The code I have written functions properly but there is one limitation where I need to explicitly mention the controller name 'DemoCtrl'. I am wondering if ther ...

Tips for retrieving data from Angular dropdown menus

How to Retrieve Selected Value in AngularJS HTML <select data-ng-model='datasource.value' ng-options='sourcetype.dataSourceType as sourcetype.dataSourceDesc for sourcetype in sourcetypes' data-ng-change="getAccountCredentials(sourc ...