附加了包含javascript的HTML不运行，我该如何使它运行？

Question

我正在添加一些包含JavaScript的HTML。

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

并且

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

这两段代码在我正在添加的大量HTML中。如果页面加载时它们已经存在，则它们可以正常工作，但是如果我进行了添加，则无法正常工作。您建议我做什么？是否需要对DOM进行某种请求，以便在添加后重新解释JavaScript？编辑：更多信息，我遇到此问题，因为我正在使用AJAX将一些内容添加到数据库，并且成功后我将HTML附加到所需位置。有点像SO对评论所做的方式。编辑2：尽管所有讨论都围绕着它，还是感谢答案，已经解决了。

- fmsf

Answer 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）的东西很好，因为它可以处理跨浏览器兼容性问题。

- Mark Biek

Answer 2

你是否正在通过AJAX追加HTML？如果是，你需要手动eval()返回的JavaScript。你可以将响应包装在一个div中，像这样处理：

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

如果您使用的是像Prototype这样的库，那么就会简单得多，因为您可以将响应传递给evalScripts()方法。

- robmerica

---

我在一夜绝望的谷歌搜索中发现了你的帖子。你解决了我的问题。我爱你，伙计。 - adolfojp

+1但仍然建议避免使用eval，不是吗？ - fmsf

是的，但我不知道其他运行JavaScript在Ajax响应中的方法。 - robmerica

Answer 3

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

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

IE：

Object.onclick = someFuntion

FF：

Object.addEventListener('click', someFunction);

- Kevin

Answer 4

你应该使用 addEventListener('click', /*...*/) 来代替在 innerHTML 或其他地方设置 onclick。

IE 会调用addEventListener，但叫法可能不同，所以你需要做一些补充。

(编辑：IE 叫它 attachEvent()。希望这对你有所帮助。)

- user42092

Answer 5

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

- toby