日期:2014-05-16  浏览次数:20375 次

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