关于IE8下removeAttr('onclick')不成功的解决方法

最新推荐文章于 2024-03-01 10:12:37 发布

原创最新推荐文章于 2024-03-01 10:12:37 发布 · 794 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jQuery #JavaScript #IE8 #onclick #removeAttr #ViewUI

本文详细介绍了在使用jQuery处理IE8浏览器时遇到的一个bug，即移除元素的onclick属性后，点击该元素仍然会触发事件。作者通过多次尝试最终找到了解决方案，并分享了解决过程及原理。对于使用jQuery进行前端开发时遇到类似问题的开发者，本文提供了有价值的参考。

测试代码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				var topHTML = "<input id='but' type='button' value='提交' onclick='alert(1);' />";
				$("body").append(topHTML);
			});
			$(function(){
				$("input").removeAttr('onclick');
			});
		</script>
	</head>
	<body>
	</body>
</html>

这段代码在Chrome下执行是没有问题的，在IE8下执行通过查看源代码onclick属性确实是去掉了，但是点击按钮还是会响应单击事件。（IE8的版本是8.0.7601.17514）

发现这个问题的时候尝试了很多方法都没有解决，在不经意间执行了2次removeAttr发现问题解决了。
虽然现在还不知道出现这个问题跟解决这个问题的原理，还是想将这个解决方法分享下，也希望有知道为什么的朋友可以解我这个疑惑。

解决以后的代码：

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript">
			$(function(){
				var topHTML = "<input id='but' type='button' value='提交' onclick='alert(1);' />";
				$("body").append(topHTML);
			});
			$(function(){
				$("input").removeAttr('onclick');
				$("input").removeAttr('onclick');
			});
		</script>
	</head>
	<body>
	</body>
</html>