javascript - 添加到 document.body 的 innerHTML 导致 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

您正在重写整个 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

或者，您可以将事件委托(delegate)更改为未被覆盖的 Assets ，例如 body 或 document

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