Add click event on a dynamically created element in Javascript

Question

I am trying to add a click event on an element which i create dynamically in Vanilla JS. With jquery its super simple all i would do is

$(document).on('click','.el', function() {
    //somecode 
})

However with Vanilla JS (because i'm using react) i can't do the same thing. I've tried adding the dynamic element as an argument just like i would in jquery but no money.

I'm sure it can be done just not the way i'm thinking. Any ideas?

I tried

let div = document.createElement('DIV')
div.classList.add('el')
document.addEventListener('click','.el', function() {
    //some code
})

I also tried

document.addEventListener('click',div, function() {
    //some code
})

None of these methods worked

try div.addEventListener('click', function() { //some code }) — fedesc
– fedesc, Commented Aug 8, 2020 at 7:46
Is it possible to update your question with a Minimal, Complete, and Reproducible code example of how you are generating elements? If you have the raw htmlDOMNode you can add a listener to that. — Drew Reese
– Drew Reese, Commented Aug 8, 2020 at 7:47
See the working solution below in my answer. Would you mind accepting any answer. if its helped you ? thanks. — Always Helping
– Always Helping, Commented Aug 8, 2020 at 14:39

Drew Reese · Accepted Answer · 2020-08-08 08:09:39Z

2

let div = document.createElement('DIV');
div.classList.add(".whatever");
div.addEventListener('click', function() {
    console.log('dynamic elements')
});
document.body.appendChild(div);

https://jsfiddle.net/yu1kchLf/

edited Aug 8, 2020 at 8:09

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

answered Aug 8, 2020 at 7:59

m0shiur

361 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Always Helping · Accepted Answer · 2020-08-08 08:08:51Z

1

You could simply use and onclick function and just call it as variable from your dynamically added elements.

Live Demo

//Create function
let button = document.createElement('button');
button.classList.add("myBtn");
button.innerText = 'Click Me';
button.onclick = myFunction //assign a function as onclick attr
document.body.appendChild(button);


//Call function
function myFunction() {
  console.log('I am being called from dynamically created button')
}

answered Aug 8, 2020 at 8:08

Always Helping

14.6k4 gold badges16 silver badges30 bronze badges

Comments

Khushboo · Accepted Answer · 2020-08-08 08:14:13Z

1

i think what you are missing is appending the element you created to your DOM. have a look at this:

var createDiv = function() {
  let div = document.createElement('DIV');
  div.id = 'el';
  div.innerHTML = '<b>hey</b>';
  div.classList.add('styles');
  document.body.appendChild(div);
  div.addEventListener('click', function() {
    alert('Look here');
  })
};

here's a fiddle so you can playaround: https://jsfiddle.net/khushboo097/e6wrLnj9/32/

answered Aug 8, 2020 at 8:14

Khushboo

945 bronze badges

Comments

Carsten Massmann · Accepted Answer · 2020-08-08 08:45:58Z

1

You can do something like the following:

const d=document.getElementById("container");
document.addEventListener('click', function(ev) {
  if (ev.target?.classList.contains('el')) { 
   console.log("My .el element was clicked!");
   ev.target.classList.contains("segundo") && 
   (d.innerHTML+='<p class="el">another clickable paragraph</>');
  }
})

<div id="container"><h2>Something unclickable</h2>
<p class="el primero">A clickable paragraph!</p>
<p class="otro primero">something unclickable again ...</p>
<button class="el segundo">add clickable element</button>
</div>

The event handler is attached to the document itself but will only fire the console.log() if the ev.target, i. e. the clicked element, is of class "el".

edited Aug 8, 2020 at 8:45

answered Aug 8, 2020 at 8:16

Carsten Massmann

28.4k3 gold badges25 silver badges49 bronze badges

Collectives™ on Stack Overflow

Add click event on a dynamically created element in Javascript

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related