.append（）时，onclick事件不起作用
[英]Onclick event doesn't work when .append()
问题描述
Simple example: I have html 
简单的例子：我有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>
then I call 然后我打电话
$("#wrapper").append(
"<div onclick=\"alert('TEST')\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\">" +
"</div>"
);
so appears small box, when I click it in FF or Chrome - alert box appears. 因此，当我在FF或Chrome中单击它时出现小盒子 - 出现警告框。 But problem is: in IE8 onclick doesn't work . 但问题是： 在IE8 onclick不起作用 。 It works when I use .html("...") . 它在我使用.html("...") 。
Please, help me! 请帮我！ =) Thank you! =）谢谢！
5 个解决方案
解决方案1
3 2010-02-28 18:22:24
You could use jQuery to create the new div . 您可以使用jQuery创建新的div 。 This would let jQuery handle the click-logic between browsers. 这将让jQuery处理浏览器之间的点击逻辑。 I just tested what follows in IE8, and it works: 我刚刚测试了IE8中的内容，它的工作原理如下：
$("<div>")
.css({'background-color':'aqua','width':'20px','height':'20px','position':'absolute'})
.click(function(){ alert("TEST"); })
.appendTo("#wrapper");
Online Demo: http://jsbin.com/ekumi/edit 在线演示： http ： //jsbin.com/ekumi/edit
解决方案2
1 2010-12-21 15:43:49
It seems that IE8 can't process events declared in html tags that are empty, even though they are given non-zero measures through css. 似乎IE8无法处理在html标签中声明为空的事件，即使它们通过css给出了非零测量。
Try adding ' 尝试添加' ' as content. '作为内容。 It worked for me. 它对我有用。
解决方案3
0 2010-02-28 18:17:43
This is probably a security feature, possibly related to the fact that IE cannot directly return a function through eval . 这可能是一个安全功能，可能与IE无法通过eval直接返回eval 。
As a workaround, you could build a DOM tree using jQuery, then write $("#wrapper").empty.append(tree) . 作为一种解决方法，您可以使用jQuery构建DOM树，然后编写$("#wrapper").empty.append(tree) 。
解决方案4
0 2010-02-28 18:26:44
IE has a problem evaluating dynamically inserted html and their events. IE在评估动态插入的html及其事件时遇到问题。 I think this is because inline onclick/onmouseover/etc. 我认为这是因为内联onclick / onmouseover / etc. has to be parsed by the HTML engine on page load and they are not fully parsed when inserting elements through JS. 必须在页面加载时由HTML引擎解析，并且在通过JS插入元素时它们不会被完全解析。 Sometimes it works, and other times it doesn't. 有时候它会起作用，有时却不起作用。 It's much better to insert the element first, and then wire an event to it after that: 最好先插入元素，然后在之后将事件连接到它：
$("#wrapper").html("<div id=\"newdiv\" style=\"background-color: aqua; width: 20px; height: 20px; position: absolute\"></div>");
$("#newdiv").click("function() { alert("TEXT"); });
解决方案5
0 2010-02-28 20:29:05
First of all, I'm sorry - in question code must contain .append(...) - and this is not working in IE. 首先，我很抱歉 - 问题代码必须包含.append（...） - 这在IE中不起作用。 I already edited question. 我已经编辑了问题。
I solve the problem in this way: 我用这种方式解决了这个问题：
$('<div>').append($('#item-of-interest').clone()).remove().html();
But I still don't understand why IE behaves incorrect with append method. 但是我仍然不明白为什么IE使用append方法表现不正确。 =( =（
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.