包含 javascript 的附加 HTML 无法运行，如何使其运行？答案

【问题标题】：Appended HTML that contains javascript doesn't run, how can I make it run?包含 javascript 的附加 HTML 无法运行，如何使其运行？
【发布时间】：2010-10-11 02:49:41
【问题描述】：

我正在附加一些包含 javascript 的 HTML。

<td onclick="toggleDay('+data+',this,\'tue\');">T</td>

和

<img src="img/cross.png" onclick="deleteAlarm('+data+');">

这两段代码在我附加的大量 HTML 中。

如果它们在页面加载时已经存在但在我追加时不存在，则它们可以正常工作。

你建议我做什么？是否需要对 DOM 进行某种排序请求以在追加后重新解释 JavaScript？

编辑：

只是更多信息，我遇到了这个问题，因为我正在向数据库添加一些带有 AJAX 的东西，并且在成功时我将 html 附加到它需要的位置。有点像 SO 对 cmets 的处理方式。

编辑2：

即使有所有关于它的讨论，感谢您的回答，让它工作。

【问题讨论】：

标签： javascript html dom dom-manipulation

【解决方案1】：

我会这样做：

首先在你的 html 中添加 id 属性：

<td id="toggleDayCell">T</td>

<img src="img/cross.png" id="crossImg">

然后让 Javascript 在页面的 onload 事件上运行并附加到您感兴趣的事件。

在PrototypeJS 中，它可能看起来像这样：

Event.observe(window, 'load', function(){
  if( $('toggleDayCell') ) {
    Event.observe( $('toggleDayCell'), 'click', function(event){
      //do stuff here
    }
  }

  if( $('crossImg') ) {
    Event.observe( $('crossImg'), 'click', function(event) {
       //do stuff here
    }
  }
});

使用 Prototype（或 jQuery）之类的东西很好，因为它可以解决跨浏览器的兼容性问题。

【讨论】：

【解决方案2】：

您是否通过 AJAX 附加 HTML？如果是这样，您将不得不手动 eval() 您返回的 JavaScript。您可以将响应包装在 div 中并执行以下操作：

wrapper.getElementsByTagName("script")
// for script in wrapper...
eval(script.innerHTML)

如果您使用的是原型之类的库，它会简单得多，因为您可以将响应传递给 evalScripts() 方法。

【讨论】：

我刚刚在绝望的谷歌搜索中发现了你的帖子。你解决了我的问题。我爱你。
+1 但它仍然说应该避免 eval，不是吗？
是的，但是没有其他方法可以在 ajax 响应中运行 javascript，至少我不知道。

【解决方案3】：

将 HTML 附加到文档，然后以编程方式将 onclick 事件添加到对象。

这不是我的想法，但是......我认为你可以这样做：

IE：

Object.onclick = someFuntion

FF：

Object.addEventListener('click', someFunction);

【讨论】：

【解决方案4】：

AJAX 有一些怪癖……尤其是 IE。示例：您不能使用 innerHTML 属性在表格元素中插入/更新任何内容（在 IE 中）。最好使用 DOM 函数来插入/更新/删除元素节点（或添加事件处理程序）。您可以使用提到的 eval() 函数来运行动态加载的 javascript，该 javascript 使用 DOM 对象修改文档。

【讨论】：

【解决方案5】：

您应该使用addEventListener('click', /*...*/)，而不是在innerHTML 或其他中设置onclick。

IE 调用 addEventListener 完全是别的东西，所以你也必须补偿它。

（编辑：IE 称之为attachEvent()。希望这有一些用处。）

【讨论】：