Добавление в innerHTML document.body приводит к тому, что jQuery .on() не находит свою цель

Question

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

Теперь мы подошли к реальной проблеме. Это все работает отлично, но только пока я не добавлю 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"/>'))
})