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

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

本文关键字：找不到 on 目标 导致 文档 innerHTML body 添加 jQuery      更新时间：2023-09-26

所以我有一些动态生成的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/

您正在重写整个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]")
})
演示

或者你可以改变你的事件委托到一个不被覆盖的资产，如body或document 

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