Click event in dynamically created Element

Question

I am new to Javascript and learning new things day by day. Here I need to click the button and new button are created now I need to again click that newly created button and create new button again and so on. It must be in Pure Javascript.Please help me out

 document.getElementById("btn").addEventListener("click",function(e) {
        var btn=document.createElement("BUTTON");
        var t=document.createTextNode("Click Me");
        //Some code to click dynamically created element
        btn.appendChild(t);
        document.body.appendChild(btn);

so you need to add a click event. If you make it a generic function, than it is easier to reuse it. Or you can learn about event delegation. — epascarello, Aug 08 '16 at 16:00
@epascarello yes I need to click dynamically created elememt.But i dont know how to manipulate it .How does event delegation work with dynamically created element.Please help — Tripti Pant, Aug 08 '16 at 16:02

score 0 · Answer 1 · edited May 23 '17 at 10:30

Create a function to create a button that creates a button. Note: you're not appending the text node to the button.

If you want to watch changes in the DOM and add events to the buttons in a alternative way, check the answers in this question...

var body = document.getElementsByTagName('body')[0];

(function myButton() {

    var btn = document.createElement("BUTTON");
    var text = document.createTextNode("Click Me");

    // append the text to the button
    btn.appendChild(text);

    // append the btn to the body tag
    body.appendChild(btn);

    // adds the click event to the btn
    btn.addEventListener("click", myButton);

})();

score 0 · Answer 2 · edited May 23 '17 at 12:10

0

In this case, jQuery do the good jobs for you.

$(function($){
  $(document).on('click','button',function(e){
    // do your stuff.
  })
})

Here is another good answer using jQuery:

Event binding on dynamically created elements?

edited May 23 '17 at 12:10

Community

1
1

answered Aug 08 '16 at 16:21

Radian Jheng

667
9
20

score -1 · Answer 3 · answered Aug 08 '16 at 16:10

Simply add a eventlistener to document, then check tag. You can further expland it by also adding a Id or Class to the buttons and check that aswell (in case you need multiple buttons that does different things)

document.addEventListener('click', function(event) {
    var clickedEl = event.target;
    if(clickedEl.tagName === 'BUTTON') {
      clickedEl.innerHTML = "clicked!";
        
        var btn=document.createElement("BUTTON");
        var t=document.createTextNode("Click Me");
   btn.appendChild(t); 
        document.body.appendChild(btn);
    }
});

<button>Click Me</button>

score -1 · Answer 4 · answered Aug 08 '16 at 16:11

Make it a generic function and bind the click events to that method.

function addButton () {
    var btn = document.createElement("BUTTON");
    btn.type = "button";
    var t = document.createTextNode("Click Me");
    btn.appendChild(t); 
    btn.addEventListener("click", addButton);
    document.body.appendChild(btn);
}

document.getElementById("btn").addEventListener("click", addButton);

<button type="button" id="btn">Button</button>

Or event delegation

function addButton () {
    var btn = document.createElement("BUTTON");
    btn.type = "button";
    var t = document.createTextNode("Click Me");
    btn.appendChild(t); 
    document.body.appendChild(btn);
}

document.body.addEventListener("click", function(e) {
    if (e.target.tagName==="BUTTON") {  //I personally would use class or data attribute instead of tagName
      addButton();
    }
});

<button type="button" id="btn">Button</button>

And the downvote reason? I would like to improve to make you happy. ;) — epascarello, Aug 08 '16 at 16:14
+1, but note: `document.body.addEventListener("click"...` isn't good for performance as it'd check if certain element's tag name is equal to the number `476` everytime the page is clicked, and it's missing to uppercase `e.target.tagName`. — , Aug 08 '16 at 17:14

Click event in dynamically created Element

4 Answers4