Question

我是Javascript的新手，每天都在学习新事物。在这里，我需要单击按钮，然后创建新按钮，我需要再次单击新创建的按钮并再次创建新按钮，依此类推。它必须是纯Javascript。请帮助我

 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

创建一个函数来创建一个创建按钮的按钮。注意：您没有将文本节点附加到按钮。

如果您想观看DOM中的更改并以其他方式向按钮添加事件，请查看此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

使其成为通用函数，并将click事件绑定到该方法。

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>

或事件委托

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

在这种情况下，jQuery为你做好工作。

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

这是使用jQuery的另一个好答案：

Event binding on dynamically created elements?

Answer 4

只需将eventlistener添加到文档中，然后检查标记。你可以通过在按钮上添加一个ID或类来进一步解释它，并检查它（如果你需要多个按钮做不同的事情）

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>

单击动态创建的元素中的事件

4 个答案: