Implementing dynamic AJAX functionality for dynamically generated elements using vanilla JavaScript

Question

Implementing dynamic AJAX functionality for dynamically generated elements using vanilla JavaScript

Currently, I am working on developing a movie information application using ajax. However, I have encountered a challenging issue that I am struggling to resolve. After creating an ajax request, I proceed to dynamically generate content and incorporate it into the webpage. Here is an example of my dynamically created content:

output +=
  `<div class="box">
    <div class="box-image">
     <img src="${val.Poster}" alt="${val.Title}">
    </div>
    <div class="box-body">
        <h4 class="box-title">${val.Title}</h4>
        <p class="year">${val.Year}</p>
        <a href="#" class="modal-trigger" id="modalTrigger">Modal Trigger</a>
    </div>
  </div>`.

My challenge lies in implementing a function for the anchor tag in order to open a modal. Additionally , I am searching for a way to prevent its default behavior within this function.

javascript ajax function dynamic

Answer 1

Answer №1

To create an event listener for clicks on the body document and target a specific element, follow these steps:

$("body").on('click', "a.modal-trigger", function(e) {
    e.preventDefault();

$("#ajax").click(function() {
  $("#output").append(
    $("<a/>")
    .attr("id", "modalTrigger")
    .attr("class", "modal-trigger")
    .attr("href", "#")
    .text("modal")
  );
});

$("body").on('click', "a.modal-trigger", function(e) {
  e.preventDefault();
  console.log('modal!');
  $("#output").append("modal!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button id="ajax">
Make Ajax Request
</button>

  <div id="output">

  </div>
</body>

console.log('modal!'); });

Answer 2

To create an event listener for clicks on the body document and target a specific element, follow these steps:

$("body").on('click', "a.modal-trigger", function(e) {
    e.preventDefault();

$("#ajax").click(function() {
  $("#output").append(
    $("<a/>")
    .attr("id", "modalTrigger")
    .attr("class", "modal-trigger")
    .attr("href", "#")
    .text("modal")
  );
});

$("body").on('click', "a.modal-trigger", function(e) {
  e.preventDefault();
  console.log('modal!');
  $("#output").append("modal!");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <button id="ajax">
Make Ajax Request
</button>

  <div id="output">

  </div>
</body>

console.log('modal!'); });

Implementing dynamic AJAX functionality for dynamically generated elements using vanilla JavaScript

Answer №1

Similar questions

Adding text chips to a text field in Vuetify - A simple guide

Are there any specific events in PrimeNg's p-calendar that trigger when the time is changed?

Find the JavaScript code that selects the previous value chosen

Ensure the md-sidenav remains open by default

Arranging an array of objects in Angular based on the value inside each object

Refine your search with a JSON object description in expressJS and UnderscoreJS

How can I alter the center point of an Object3D in Three.js?

The component encountered an error because the element type provided was not valid

The term "this" in the global scope versus within a function in the Node.js environment

Attempting to send data as arguments in an axios request

Maintain the vertexShader's movement even when the mesh is rotating

Experiencing difficulties integrating relational data with Angular and MongoDB

"webpack" compared to "webpack --watch" produces varying results in terms of output

The elements being parsed are appearing as undefined

Upon employing the setTimeout method, the element with the id "sign-in-block" will have its display style set to "none" after a delay of 1000 milliseconds

In order to activate parallel building capabilities, be sure to include the '/m' switch

Instructions on converting Dart to JavaScript for a non-web platform

You must include an argument for 'model' in the Angular service

Missing index in the GET variable

Is it possible to save an HTML5 Canvas screenshot directly onto the page?