请帮忙看下这段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>