Javascript - Create Dynamic Element then Do Something on Element's Click

Question

How can I call a click event listener on a dynamically created element rendered in the DOM?

I have some scripts that dynamically create elements in the DOM, one of them being a button/a. I would like that button/a to do something once the user clicks it. Right now nothing happens but if I add a setTimeout on the things to happen upon a click, then it kind of works - only let's me do the something on the first element's click (button/a). However I can't rely on a setTimeout to make this chunk of code work.

Here is more or less what I have without the setTimeout method:

// This triggers the whole process
var mainBtn = document.querySelector('.mainBtn');
mainBtn.addEventListener('click', function(e){
   e.preventDefault();
   mainFunc();
});

// This creates and renders dynamic content in DOM
function mainFunc(){
   var out = document.querySelector('.outputWrapper');
   var mainArr = ['something ', 'another ', 'else ', 'last one.'];
   var div = document.createElement("div");
   var btn = document.createElement("a");
   var btnText = document.createTextNode("Click Me");

   btn.appendChild(btnText);
   btn.className = "clickMeBtn";

   for(a of probArr){
      div.append(a);
      div.append(btn);
   }
   out.append(div);
}

// This is what should happen on button/a click
var clickedBtn = document.querySelector('.clickMeBtn');
if( clickedBtn != null ){
   clickedBtn.addEventListener('click', function(e){
      e.preventDefault();
      console.log('click');
   });
}

Here's with the setTimeout method:

// This triggers the whole process
var mainBtn = document.querySelector('.mainBtn');
mainBtn.addEventListener('click', function(e){
   e.preventDefault();
   mainFunc();
});

// This creates and renders dynamic content in DOM
function mainFunc(){
   var out = document.querySelector('.outputWrapper');
   var mainArr = ['something ', 'another ', 'else ', 'last one.'];
   var div = document.createElement("div");
   var btn = document.createElement("a");
   var btnText = document.createTextNode("Click Me");

   btn.appendChild(btnText);
   btn.className = "clickMeBtn";

   for(a of probArr){
      div.append(a);
      div.append(btn);
   }
   out.append(div);
}

// This is what should happen on button/a click
setTimeout(function(){
   var clickedBtn = document.querySelector('.clickMeBtn');
   if( clickedBtn != null ){
      clickedBtn.addEventListener('click', function(e){
         e.preventDefault();
         console.log('click');
      });
   }
}, 10000);

Again this kind of works...it let's me click only on the first instance of the clickedBtn variable.

Any suggestions on how to make this idea work?

Thanks a lot!!

Igor · Accepted Answer · 2018-01-24 14:28:59Z

2

document.querySelector('.clickMeBtn'); returns the first found element, or null.

Attach click event handler when you create the anchor element:

var btn = document.createElement("a");
btn.addEventListener('click', function(e){
  e.preventDefault();
  console.log('click');
});

answered Jan 24, 2018 at 14:28

Igor

15.9k1 gold badge29 silver badges34 bronze badges

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

1 Comment

nuvio Over a year ago

haha, silly me! I thought Sergio wanted to create the event listener separately from the element creation...

nuvio · Accepted Answer · 2018-01-24 14:37:27Z

I am not 100% sure of what is your question. But the problem I can see is that you cannot bind listeners to elements that are not yet created in the DOM. So I can see 3 options here:

1- You build a wrapper on top of document.createElement() and a wrapper on top of addEventListener to bind the events to the elements after they are created. For example you build a map of event listeners to begin with, with the 'element selector' as Key and function to call as Value. Then you do a lookup of the listener once the element has been created and you bind it to it with addEventListener.

2- You use JQuery on() method like this:

// define the click handler for all buttons
$( document ).on( "click", "button", function() {
    alert( "Button Clicked!" )
});

/* ... some time later ... */

// dynamically add another button to the page
$( "html" ).append( "<button>Click Alert!</button>" );

Source: this JQuery script is from [here][1]

(EDIT) 3- you just bind it after creation, as suggested. Although I thought you wanted to do more advanced stuff, like dynamically add elements asynchronously from the listeners.

Collectives™ on Stack Overflow

Javascript - Create Dynamic Element then Do Something on Element's Click

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related