Question

简单示例：我有html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="portal.css" />
        <script type="text/javascript" src="/test/lib.js"></script>
        <script type="text/javascript" src="test.js"></script>
    </head>
    <body onload="init();" class="body">
        <div id="wrapper">
        </div>
    </body>
</html>

然后我打电话给

$("#wrapper").append(
        "<div onclick=\"alert('TEST')\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\">" +
        "</div>"
    );

所以看起来是小盒子，当我在FF或Chrome中单击它时 - 出现警告框。但问题是：IE8 onclick中的不起作用。它在我使用.html("...")时有效。

请帮帮我！ =）谢谢！

Answer 1

您可以使用jQuery创建新的div。这将让jQuery处理浏览器之间的点击逻辑。我刚刚测试了IE8中的内容，它可以工作：

$("<div>")
  .css({'background-color':'aqua','width':'20px','height':'20px','position':'absolute'})
  .click(function(){ alert("TEST"); })
  .appendTo("#wrapper");

在线演示：http://jsbin.com/ekumi/edit

Answer 2

似乎IE8无法处理在html标记中声明为空的事件，即使它们通过css给出了非零测量。

尝试添加“ ”作为内容。它对我有用。

Answer 3

这可能是一个安全功能，可能与IE无法通过eval直接返回功能有关。

作为一种解决方法，您可以使用jQuery构建DOM树，然后编写$("#wrapper").empty.append(tree)。

Answer 4

IE在评估动态插入的html及其事件时遇到问题。我认为这是因为内联onclick / onmouseover / etc.必须在页面加载时由HTML引擎解析，并且在通过JS插入元素时它们不会被完全解析。有时候它会起作用，有时却不起作用。最好先插入元素，然后在之后将事件连接到它：

$("#wrapper").html("<div id=\"newdiv\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\"></div>");
$("#newdiv").click("function() { alert("TEXT"); });

Answer 5

首先，我很抱歉 - 问题代码必须包含.append（...） - 这在IE中不起作用。我已经编辑了问题。

我用这种方式解决问题：

$('<div>').append($('#item-of-interest').clone()).remove().html();

但是我仍然不明白为什么IE使用append方法表现不正确。 =（

.append（）时，onclick事件不起作用

5 个答案: