Добавление к innerHTML document.body вызывает jQuery .on(), чтобы не найти его цель

Question

Итак, у меня есть динамически сгенерированный материал HTML. Если вы нажмете кнопку, она добавит некоторый html, который имеет другую кнопку, и вы можете добавить этот другой html несколько раз, создавая несколько его копий. Это все внутри тега <form>, поэтому мне нужно использовать e.preventDefault() на каждой кнопке, чтобы предотвратить попытки javascript отправлять данные. Каждая кнопка также имеет свой собственный код для onclick. Однако есть проблема с событиями кликов, добавленными javascript, на вновь созданный контент. Если у меня есть <button class="myBtn"></button>, то в javascript у меня есть $(".myBtn").click(...), который будет работать нормально, но только для кнопок, которые уже существуют при запуске javascript-кода, что означает, что новые созданные кнопки не будут связаны с событием. Решение этой проблемы найдено here.

Теперь мы подошли к реальной проблеме. Все работает отлично, но только до тех пор, пока я не добавлю к document.body.innerHTML. Как только я выполняю строку document.body.innerHTML += "Text", код из вышеприведенной ссылки больше не выполняется при нажатии сгенерированной кнопки.

У меня есть пример здесь: https://jsfiddle.net/6hvgatLy/1/

Answer 1

Вы переписывание всего innerHTML тела, которая удалит все приемникам событий

Использования append() вместо

Изменить

$("#deadlyBtn").click(function(e){ 
    e.preventDefault(); 
    document.body.innerHTML += "Now try clicking [Add new Input]" 
}) 

Для

$("#deadlyBtn").click(function(e){ 
    e.preventDefault(); 
    $('body').append("Now try clicking [Add new Input]") 
}) 

DEMO

В качестве альтернативы вы можете изменить событие делегация на актив, который не перезаписаны как body или document

$(document).on("click", ".formDiv .innerContainer .innerBtn", function(e){ 
    e.preventDefault() 
    $(this).before($('<input type="text" placeholder="Textbox"/>')) 
})