大家帮忙看下这个click事件.怎么让它们互不相关.

为什么点击"获取"多次,然后点击"领取序列号"会多次弹出"领取成功!",只要我点击多少次"获取","领取成功!"就会弹出多少次.
这个怎么解决啊?
而且每个"领取"按钮应该互不相关的.
比如:点击"获取2",然后点击"获取3",再点击"领取序列号",就会弹出"领取成功!"2次...
求高手帮忙弄下..感谢.
<!DOCTYPE HTML>
<html>
<head>
<title>网站标题</title>
<script type="text/javascript" src="http://www.5code.net/js/jquery-1.8.0.min.js"></script>
<style type="text/css">
*{ margin: 0;padding: 0; }
body{ height: 5100px }
li{ float: left;width: 100px;height:100px;background: orange;margin-left: 10px;display: inline;text-align: center }
.pop{ position:absolute;top:50%;left:50%;width:300px;height: 100px;background: red;margin: -50px 0 0 -150px; }
</style>
</head> <body> <div id="pop" class="pop" style="display:none">
<a href="javascript:void(0)" id="close">关闭</a>
<a href="javascript:void(0)" id="get">领取序列号</a>
</div>

<ul id="list" class="list">
<li><a href="javascript:void(0)" id="count_3_sl">获取1</a></li>
<li><a href="javascript:void(0)" id="count_7_sl">获取2</a></li>
<li><a href="javascript:void(0)" id="count_10_sl">获取3</a></li>
<li><a href="javascript:void(0)" id="new_year_last">获取4</a></li>
<li><a href="javascript:void(0)" id="get_lover_day_gift">获取5</a></li>
</ul> <script type="text/javascript">
$("#close").click(function(){
$(this).parent().hide();
}) $("#count_3_sl").click(function(){
$("#pop").show();
aa();
}); $("#count_7_sl").click(function(){
$("#pop").show();
aa();
}); $("#count_10_sl").click(function(){
$("#pop").show();
aa();
}); $("#new_year_last").click(function(){
$("#pop").show();
aa();
}); $("#get_lover_day_gift").click(function(){
$("#pop").show();
aa();
}); function aa(){
$("#get").click(function(){
alert("领取成功!");
})

} </script> </body>
</html>

解决方案 »

  1.   

    多次绑定问题
    只绑定一次即可，一种修改方法将绑定提出来，只绑定一次。
    <!DOCTYPE HTML>
    <html>
    <head>
    <title>网站标题</title>
    <script type="text/javascript" src="http://www.5code.net/js/jquery-1.8.0.min.js"></script>
    <style type="text/css">
    *{ margin: 0;padding: 0; }
    body{ height: 5100px }
    li{ float: left;width: 100px;height:100px;background: orange;margin-left: 10px;display: inline;text-align: center }
    .pop{ position:absolute;top:50%;left:50%;width:300px;height: 100px;background: red;margin: -50px 0 0 -150px; }
    </style>
    </head> <body> <div id="pop" class="pop" style="display:none">
    <a href="javascript:void(0)" id="close">关闭</a>
    <a href="javascript:void(0)" id="get">领取序列号</a>
    </div>

    <ul id="list" class="list">
    <li><a href="javascript:void(0)" id="count_3_sl">获取1</a></li>
    <li><a href="javascript:void(0)" id="count_7_sl">获取2</a></li>
    <li><a href="javascript:void(0)" id="count_10_sl">获取3</a></li>
    <li><a href="javascript:void(0)" id="new_year_last">获取4</a></li>
    <li><a href="javascript:void(0)" id="get_lover_day_gift">获取5</a></li>
    </ul> <script type="text/javascript">
    $("#close").click(function(){
    $(this).parent().hide();
    }) $("#count_3_sl").click(function(){
    $("#pop").show();

    }); $("#count_7_sl").click(function(){
    $("#pop").show();
    aa();
    }); $("#count_10_sl").click(function(){
    $("#pop").show();

    }); $("#new_year_last").click(function(){
    $("#pop").show();

    }); $("#get_lover_day_gift").click(function(){
    $("#pop").show();

    });
    aa();
    function aa(){
    $("#get").click(function(){
    alert("领取成功!");
    })

    } </script> </body>
    </html>
      

  2.   

    如楼上所说，事件重复绑定了。
    处理方法如下 。
    function aa(){
                    $("#get").unbind('click');
                    $("#get").click(function(){
                        alert("领取成功!");
                    })
                     
                }
      

  3.   

    要释放click事件，不然会叠加
    function aa(){
    $("#get").unbind("click").click(function(){
    alert("领取成功!");
    })
    }