包含javascript的附加HTML无法运行，如何让它运行？

StackOverflow https://stackoverflow.com/questions/608034

题

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

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

和

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

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

如果页面加载时它们已经存在，那么它们可以正常工作，但是当我正在追加时它们没有。

你建议我做什么？是否需要一些排序请求让DOM在追加后重新解释JavaScript或？

编辑：

还有一些信息，我遇到了这个问题，因为我在数据库中添加了一些AJAX的东西，并且在成功时我将html附加到它需要的位置。有点像SO对评论的做法。

EDIT2：

即使进行了所有关于它的讨论，也要感谢答案，让它发挥作用。

有帮助吗？

解决方案

我会这样做：

首先在您的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）之类的东西很不错，因为它可以兼顾跨浏览器的兼容性。

其他提示

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

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

如果您正在使用类似原型的库，那么将更简单，因为您可以将响应传递给evalScripts（）方法。

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

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

IE：

Object.onclick = someFuntion

FF：

Object.addEventListener('click', someFunction);

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

你应使用 addEventListener（'click'，/ *。*。*），而不是在innerHTML或其他任何地方设置onclick。

IE完全调用 addEventListener ，所以你也必须补偿它。

（编辑：IE称之为 attachEvent（）。希望这是有用的。）

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top