请帮忙看下这段JQ代码，哪里出现问题了
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Chainable Transition Effects</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".run").click(function(){
alert($("a").attr("class"));
$("a").removeClass("run");
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp(1000)
.slideDown("slow")
return false;
});
});
</script>
<style type="text/css">
body { margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; }
a { font-weight: bold; color: #000000; }
#box { background: #6699FF; height: 100px; width: 100px; position: relative; }
.run{
color:red;
}
</style>
</head>
<body>
<p><a href="#" class="run">Run</a></p>
<div id="box"> </div>
</body>
</html>
运行一次时已经把class给删除了，为什么第二次点击run时，会再次调用js，请大侠帮忙修改下哪里出现问题了
[解决办法]
DOM已经绑定了事件，你删除其id className 是无法解除绑定的 比如
- HTML code
<!DOCTYPE HTML><html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <div id="test">123</div> <script> function $(el){ return typeof el == 'string' ? document.getElementById(el) : el; } $('test').onclick = function(){ alert(123); this.id = ''; } </script> </body></html>