JavaScript 按钮不工作；代码与其他工作按钮相同？

Question

我正在使用 HTML、CSS 和 JavaScript 编写一个网站。我在一个页面上有两个按钮，它们在单击时使用 JavaScript 显示信息(单击时每个按钮都会淡出其他信息以节省空间)。但是相同的代码不适用于我的其他按钮？

JavaScript:

<script type = text/javascript>
$('#scoreButton20102011').click(function() {
    $("#maleRec20102011").fadeIn(1000);
    $("#femaleRec20102011").fadeIn(1000);
    $("#maleRec20112012").fadeOut(1000);
    $("#femaleRec20112012").fadeOut(1000);
});
$('#scoreButton20112012').click(function() {
    $("#maleRec20112012").fadeIn(1000);
    $("#femaleRec20112012").fadeIn(1000);
    $("#maleRec20102011").fadeOut(1000);
    $("#femaleRec20102011").fadeOut(1000);
});​
</script>

2010/11 的按钮显示两个按钮文本，而 2011/12 的按钮让所有内容淡出？我不明白为什么。

CSS:

#maleRec20112012 {
    border-top: 3px solid #000;
    border-left: 3px solid #000;
    border-right: 3px solid #000;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    right: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20112012 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#maleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

#femaleRec20102011 {
    border-top: 3px solid #E6E6DC;
    border-left: 3px solid #E6E6DC;
    border-right: 3px solid #E6E6DC;
    border-bottom: 3px solid #000;
    position: absolute;
    display: none;
    left: 0;
    width: 350px;
    height: 400px;
}

Answer 1

尝试使用

   <script type = text/javascript>
            $('#scoreButton20102011').live('click',function()
            {
                $("#maleRec20102011").fadeIn(1000);
                $("#femaleRec20102011").fadeIn(1000);
                $("#maleRec20112012").fadeOut(1000);
                $("#femaleRec20112012").fadeOut(1000);                  
            });
            $('#scoreButton20112012').live('click',function()
            {
                $("#maleRec20112012").fadeIn(1000);
                $("#femaleRec20112012").fadeIn(1000);
                $("#maleRec20102011").fadeOut(1000);
                $("#femaleRec20102011").fadeOut(1000);
            });

        </script>

或者尝试将代码放在onready函数中