jquery - Add click event on a dynamically created element in Javascript - Stack Overflow

admin管理员组

文章数量:1429407

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

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

• javascript
• jquery
• reactjs

Share Improve this question Follow asked Aug 8, 2020 at 7:43 UrielUriel 20611 gold badge33 silver badges1717 bronze badges 3

• try div.addEventListener('click', function() { //some code }) – 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 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 Commented Aug 8, 2020 at 14:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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

https://jsfiddle/yu1kchLf/

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')
}

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/khushboo097/e6wrLnj9/32/

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".

本文标签： jqueryAdd click event on a dynamically created element in JavascriptStack Overflow