请帮忙看下这段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，请大侠帮忙修改下哪里出现问题了

解决方案 »

  1.   

    DOM已经绑定了事件，你删除其id className 是无法解除绑定的 比如
    <!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>所以楼主的代码 这样改一下<!DOCTYPE html>
    <head>
    <meta charset="UTF-8">
    <title>Chainable Transition Effects</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $(".run").click(function(){
    alert($("a").attr("class"));
    $(this).unbind('click')
    $("#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>$(this).unbind('click')