动态创建的元素中的Click事件

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);

Answer 1

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);

})();

Answer 2

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> 

Answer 3

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?

Answer 4

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>