Событие click в динамически создаваемом элементе

Question

Я новичок в Javascript и изучаю новые вещи день за днем. Здесь мне нужно щелкнуть по кнопке, и теперь будет создана новая кнопка. Мне нужно снова щелкнуть эту вновь созданную кнопку и снова создать новую кнопку и так далее. Он должен быть в Pure 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

Просто добавьте EventListener в документ, а затем проверить тег , Вы можете дополнительно expland его также добавление Id или класса к кнопкам и проверить, как хорошо (в случае, если вам необходимо иметь несколько кнопок, которые делает разные вещи)

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

<button>Click Me</button>

Answer 3

Сделать это общая функция и привязать события кликов к этому методу.

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 4

В этом случае JQuery сделать хорошую работу для вас.

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

Вот еще один хороший ответ с помощью JQuery:

Event binding on dynamically created elements?