添加到 document.body 的 innerHTML 导致 jQuery .on() 找不到它的目标

Question

所以我有一些动态生成的 HTML 东西。如果您单击一个按钮，它会添加一些具有另一个按钮的 html，您可以多次添加其他 html，生成多个副本。这些都在 <form> 标签内，所以我需要在每个按钮上使用 e.preventDefault() 来防止 javascript 尝试提交数据。每个按钮也有自己的 onclick 代码。但是，在新生成的内容上添加 javascript 的点击事件存在问题。如果我有 <button class="myBtn"></button>，那么在 javascript 中我有 $(".myBtn").click(...)，这将工作得很好，但仅适用于当 javascript 代码为 [=35= 时已经存在的按钮]，意味着新生成的按钮不会附加事件。已找到该问题的解决方案 here。

现在我们进入真正的问题。这一切都很完美，但只有在我添加到 document.body.innerHTML 之前。当我执行行 document.body.innerHTML += "Text" 时，上面 link 中的代码在单击生成的按钮时不再执行。

我这里有一个例子：https://jsfiddle.net/6hvgatLy/1/

Answer 1

您正在重写整个 body 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"/>'))
})

添加到 document.body 的 innerHTML 导致 jQuery .on() 找不到它的目标

Adding to innerHTML of document.body causes jQuery .on() to not find its target

html

javascript

jquery

onclick

dynamically-generated