Javascript 添加到document.body的innerHTML会导致jQuery.on（）找不到其目标

所以我有一些动态生成的HTML内容。如果您单击一个按钮，它会添加一些带有另一个按钮的html，您可以多次添加其他html，生成它的多个副本。这都在

标记内，因此我需要在每个按钮上使用

e.preventDefault（）

，以防止javascript尝试提交数据。每个按钮都有自己的

onclick

代码。但是，在新生成的内容上添加的javascript单击事件有一个问题。如果我有

，那么在javascript中我有

$（“.myBtn”）。单击（…）

，这将正常工作，但仅适用于运行javascript代码时已经存在的按钮，这意味着新生成的按钮不会附加事件。这个问题的解决办法已经找到了

现在我们来谈谈真正的问题。这一切都很完美，但只有在我添加到

document.body.innerHTML

之前。只要我执行行

document.body.innerHTML+=“Text”

，当单击生成的按钮时，上面链接中的代码就不再执行

---

这里有一个例子：

您正在编写一个完整的innerHTML，它将删除所有事件侦听器

改用

append（）

改变

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

到

或者，您可以将事件委派更改为未被覆盖的资产，如

正文

或

文档

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

$（document）.on（“单击“，”.formDiv.innerContainer.innerBtn”，函数（e）{
e、 预防默认值（）
$（本）。在（$（''）之前
})

我从来不知道重写innerHTML会删除所有事件侦听器！不过这是有道理的。非常感谢你！我建议按照建议更改您的活动代表团，以避免将来出现类似问题。

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