What is the best way to attach an EventListener to all DOM elements with a particular class?

Question

What is the best way to attach an EventListener to all DOM elements with a particular class?

Within my DOM, I have dynamically created spans that all have the class "foo".

Utilizing TypeScript, I aim to attach an onClick event to each of these spans post-creation.

Here is my current approach:

var foos = document.body.querySelectorAll(".foo");
foos.forEach(function (item) {            
    item.addEventListener("click", () => { 
        console.log(item); 
    });
});

However, I am facing an issue with running forEach on a NodeListOf.

Using foos = Array.from(foos) does not resolve the problem as it results in: 'from' doesn't exist on type 'ArrayConstructor'.

javascript jquery typescript onclick addeventlistener

Answer 1

Answer №1

To simplify the process, utilize a basic for loop. Each element in the foos array can be accessed by index, allowing you to assign a click event to them. The reason for this is that querySelectorAll generates a NodeList, which is similar to an array in terms of indexing but does not have the same array methods available.

var foos = document.body.querySelectorAll(".foo"));
for(var i=0; i<foos.length; i++){
    foos[i].addEventListener("click", () => { 
        console.log(item); 
    });
});

Answer 2

To simplify the process, utilize a basic for loop. Each element in the foos array can be accessed by index, allowing you to assign a click event to them. The reason for this is that querySelectorAll generates a NodeList, which is similar to an array in terms of indexing but does not have the same array methods available.

var foos = document.body.querySelectorAll(".foo"));
for(var i=0; i<foos.length; i++){
    foos[i].addEventListener("click", () => { 
        console.log(item); 
    });
});

Answer 3

Answer №2

Given that you've selected the jquery tag for your query, I'll present the jquery method:

$(".foo").on('click', function() { 
   // Implement your functionality here
});

Answer 4

Given that you've selected the jquery tag for your query, I'll present the jquery method:

$(".foo").on('click', function() { 
   // Implement your functionality here
});

Answer 5

Answer №3

I have devised three distinct approaches that you can utilize, each one being quite straightforward. Please take a moment to examine each code snippet to witness its functionality.

1 - The following example demonstrates how to attach the listener AFTER the creation of elements.

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//JQUERY WAY
$('.foo').on('click', function(){
  console.log(this.value);
});

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

2 - This Example shows how to add the listener BEFORE the creation of elements.

//JQUERY WAY
$(document).on('click', '.foo', function(){
  console.log(this.value);
});

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

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

3 - Finally, for those who prefer not to rely on jQuery, here is a Vanilla JS example:

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//VANILLA JS WAY
var myElems = document.querySelectorAll('.foo');
myElems.forEach(function(elem){
  elem.onclick = function(){
    console.log(elem.value);
  }
});

Answer 6

I have devised three distinct approaches that you can utilize, each one being quite straightforward. Please take a moment to examine each code snippet to witness its functionality.

1 - The following example demonstrates how to attach the listener AFTER the creation of elements.

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//JQUERY WAY
$('.foo').on('click', function(){
  console.log(this.value);
});

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

2 - This Example shows how to add the listener BEFORE the creation of elements.

//JQUERY WAY
$(document).on('click', '.foo', function(){
  console.log(this.value);
});

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

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

3 - Finally, for those who prefer not to rely on jQuery, here is a Vanilla JS example:

for (var i = 0; i < 4; i++){
  var a = document.createElement('input');
  a.type = 'button';
  a.value = 'click me ' + i;
  a.className = 'foo';
  document.body.append(a);
}

//VANILLA JS WAY
var myElems = document.querySelectorAll('.foo');
myElems.forEach(function(elem){
  elem.onclick = function(){
    console.log(elem.value);
  }
});

What is the best way to attach an EventListener to all DOM elements with a particular class?

Answer №1

Answer №2

Answer №3

Similar questions

Discovering when each iteration of a jQuery loop has finished

When a .post() request receives a numerical response, it is increasing by a factor of 10

Express: utilizing rawBody or buffer for a specific endpoint

What is the best way to distinguish if users are accessing my Facebook app through an iframe or by directly entering the

WebApp specifically designed for iPads that mimics the functionality of a swipe

What is the process for changing the name of a key in a MongoDB response

Assigning multiple identifiers to a single element

Implementing Shader Effects around Mouse using Three.js

Implementing Twain functionality in an Electron-based desktop application

Pause and check for the completion of data loading in mapstate

Can a Bluetooth speaker in a car be utilized for noise cancellation?

Using Express to Deliver Static Content to Subdirectories

Laravel Mix fails to recognize VueJs integration in Laravel

What is the best way to extract the JSON data from a client-side GET request response?

Variable not accessible in a Typescript forEach loop

Node.js and EJS are throwing an error, indicating that the file.ejs is unable to identify the variable definitions

Creating a database using Angular2+ in CouchDB can be achieved by following these steps

Has the user successfully authenticated with Google?

How can I automatically direct my NodeJS application to the login screen?

Saving a single ID at a time in a UseState array by clicking in ReactJS