Attach a click event listener to content loaded through AJAX using only JavaScript, without relying on jQuery

I'm curious about how to attach a click event to an element that will be added later through an ajax call. I know jQuery can handle this like so:

$(document).on('click', '.ajax-loaded-element' function(){});

However, I'm not currently using jQuery. My approach is similar to the one below, but it may fail if the same file is called twice (not sure if necessary, but want to cover all bases).

bindAjaxBtn: function(selector, fnName) {
    let isBinded = false;
    document.addEventListener('click', function(e) {
        const btn = document.querySelector(selector);
        if(btn === e.target) {
            if(!isBinded) {
                btn.addEventListener('click', function() {
                    fnName();
                    isBinded = true;
                });
                btn.click();
            }
        }
    });
},

Any assistance on this matter would be greatly appreciated. :)

Answer №1

Here is a easy solution for you to try out. Give it a shot and see how helpful it can be.

document.getElementById('submitBtn').setAttribute('onclick', 'myFunction()');
function myFunction(){
  alert('Submission Successful');
}
<button id="submitBtn">Submit Now</button>

Wishing you success in your coding endeavors!

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

How does React-router handle component reloading when there is a change in the state of the parent component

Within my React application, I've integrated a ResponsiveDrawer component sourced from material-ui's demo. This component essentially displays a drawer containing a list of menu items, a title bar, and a content frame. The state of the component ...

Exploring various endpoints using firestore Cloud Function

I am in the process of creating a versatile Cloud Function that can be executed on various endpoints. This is how my original Cloud Function looks: const functions = require('firebase-functions') const admin = require('firebase-admin' ...

Attempting to pass a limit argument to a query in urql, Strapi, and Next JS for the Query.posts field has resulted in a combination of errors including graphQLErrors

I need help figuring out how to pass a variable for the limit parameter in my GraphQL query. I am currently working with urql, Strapi, and its GraphQL plugin in a Next.js application. My goal is to introduce a variable for the limit to restrict the number ...

The script fails to start using npm start, however, it runs smoothly when using node server.js

For a while now, I've been facing an issue that I just can't seem to resolve. When I navigate to my project's src folder and execute `node server.js`, everything functions as expected. I can access the application at http://localhost:3000/cl ...

jQuery is an excellent tool for implementing drag and drop folder upload functionality, all without

I am creating a drag and drop file uploader with basic functionality. Here is the code: HTML: <div class="drop-box drop-area"> <form enctype="multipart/form-data" id="yourregularuploadformId"> <input type="file" name="files[]" ...

Using Firebase onDisconnect with React Native

I am currently working on a React Native app and I am facing an issue where I need to update the user status to 'offline' in Firebase when the user closes the app. Here is what I have tried: import React, { Component } from 'react' ...

Disable the meta tags in Zurb Foundation 5

I have searched extensively online but haven't been able to find a solution for this issue. How can I disable these zurb foundation 5 meta tags in the <head>: <meta class="foundation-mq-small"> <meta class="foundation-mq-small-only"> ...

What is the process for changing one tag into a different tag?

Can someone help me with this issue? I need to change the tags in a given string from <h2> to <h3>. For example, turning <h2>Test</h2><p>test</p> into <h3>Test</h3><p>test</p>. Any suggestions o ...

Tips for monitoring input content "live"

Currently, I am in the process of developing a web form that includes a text field intended to receive numeric values. If the user enters non-numeric characters into this field, the form will not submit. However, there is no error message displayed to noti ...

Pass the chosen option to PHP using Ajax within the same webpage, utilizing HTML

My Goal: I am working on a HTML/PHP page that displays the home page of my website. One section on this page is dedicated to highscores, with data retrieved from a database. Users can use a Select box to choose how the highscores are sorted. View the high ...

The object filtering process is experiencing issues due to the presence of a null value in the column

I am trying to extract object data based on a specific value from an array. While the code snippet below works well when there are no null values, it fails to work properly when encountering null values in the column. For reference, you can check out this ...

What is the best way to structure Vue.js components for optimal organization?

Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...

Using AJAX and JQuery to automatically refresh a webpage on a scheduled interval

I am attempting to automatically refresh a page every 5 seconds with updated data from an SQL Server. Below is my code snippet: @model Test.Data.Domain.ManufacturingCdMachine @{ ViewBag.Title = "Rimage Details"; ViewBag.JobId = Model.CurrentManufa ...

Bizarre Actions of a JavaScript Object

Currently, I am in the process of developing a Multiplayer game using Phaser and Eureca io. My main focus right now is on perfecting the authentication of players and their controls. To achieve this, I have implemented a method on the server that retrieves ...

Transform arrays within arrays to objects

I've been struggling to convert a nested array like the one below: var array = [ [['firstName', 'Henry'], ['codeName', 'Etta'], ['email', '<a href="/cdn-cgi/l/email-protection" class="__cf ...

What is the best way to implement a transaction fee when a specific function is triggered within my contract?

Consider this scenario: whenever a user successfully performs a contract function that calculates the sum of two numbers, I want to impose a 1% ETH fee that is transferred to a separate account from the contract. Although my current method "works", it is n ...

What is the top JavaScript library for compressing and adding files for transfer to an API?

In the process of developing a Vue.js application, I am facing the task of zipping data into files, adding them to a zip folder, and then sending the zip folder to an API. After researching, I found two options - Zip and JSZip, but I'm uncertain about ...

The use of a map with Next/image seems to be preventing the src image from loading properly

Utilizing next/image for loading images in my application has been successful, except when it comes to a carousel featuring multiple images. Whenever I attempt this, I encounter the following error: Error: Image is missing required "src" property. Make su ...

What is the best way to dynamically change the content of a div based on user selection?

When a user selects an option in the HTML, I want to display another div set to Block. I tried putting the OpenAskuser() function in a button, but it didn't work either. It would be ideal if we could achieve this without a button. Just have the displ ...

XPages XSP Dialog feature experiencing functionality issues

I have a situation with my XPage where all of the extension library dialogs suddenly stopped working. Strangely, I created a new XPage with a test dialog and it works perfectly fine. However, when I try to use the same test dialog on the original XPage, ...