为什么onclick处理程序在javascript中与innerHTML一起使用时不起作用[重复]答案

【问题标题】：why onclick handler didnt work when it use with innerHTML in javascript [duplicate]为什么onclick处理程序在javascript中与innerHTML一起使用时不起作用[重复]
【发布时间】：2014-04-16 22:41:57
【问题描述】：

<html>
<head>
<script>
window.onload = function(){
    var para = document.createElement("p");
    para.innerHTML = "aaaa";
    document.body.appendChild(para);

    var bspan = document.createElement("span");
    bspan.innerHTML = "bbbb";
    para.appendChild(bspan);

    bspan.onclick = function(){
       alert("hi");
    }
    para.innerHTML += "cccc";
}
</script>
</head>
<body>
</body>
</html>

这是我的代码，我希望当我点击 bbbb 时它会提醒你，但它显然不起作用，为什么？

【问题讨论】：

你的意思是spa 是bspan 吗？（2处错字）
@SteveHoward 已更正但仍然无效
如果您评论para.innerHTML += "cccc"，它可以工作。我想把它扔出去供你参考。我还在做这个。
好的，谢谢@MikeMarks，但是为什么会发生这种情况

标签： javascript event-handling

【解决方案1】：

由于您没有使用 jQuery，以下是使用 javascript 进行事件委托的简单示例，因为您的 span 元素是从代码生成的，因此请尝试一下：

document.onclick = function(event) {
  var el = event.target;
  if (el.nodeName.toLowerCase() == "span") {
    alert("hi");
  }
};

Fiddle

【讨论】：

我能知道为什么我的代码不起作用吗？？
这是因为您在运行时创建了span。 Here 是了解它的宝贵帖子。
@DhavalMarthak，如果您注释掉 para.innerHTML += "cccc";，那么它就可以工作。你知道这是为什么吗？
我和@MikeMarks 有同样的问题
一个更强的提示是para.innerHTML += "cccc" 实际上是para.innerHTML = para.innerHTML + "cccc" 的简写。如果您在尝试更改之前查看para.innerHTML，您可能会弄清楚为什么该行会丢弃您的事件处理程序。

【解决方案2】：

简短的回答，我得到的错误是Uncaught ReferenceError: spa is not defined，所以你需要先定义spa。

【讨论】：

已更正但仍然无效
是的，他的问题是它为什么不起作用。不知道为什么投反对票。
@ZachSpencer，你真的不知道他的意思是bspan吗？我不知道，我看到了你所看到的并立即知道这就是他的意思，但如果你没有，你知道，这就解释了你的答案。
@Mike 为什么需要散列？为什么我应该假设 spa 是一个错字？你需要放手迈克，这是百万分之一的答案。
@ZachSpencer - 它需要被讨论出来，因为如果你明知理解（或至少有一个不错的想法）他的真正意思，但你把这个作为答案只是为了搞笑，这并不完全是回答他的问题，虽然可以肯定，但从技术上讲，这是一个答案 - 它只是因为你没有真正注意他的问题，或者你只是想成为一个聪明的驴子。不需要天才就能明白他的意思，而这个答案并不是最想得到的。在发布这样的答案之前了解问题的根源。