Javascript jQuery脚本在web表单中不起作用

我做了一个简单的jQuery来更改表中行的css。我在JSFIDLE中创建了它，它在那里工作得很好，但是当我将它放入我的web项目中时，它就不工作了

代码如下：

HTML:

jQuery：

 var counter = 0;

$("#button").bind("click",function() {
        counter++;
    switch(counter){
        case 1:
            $(".tr-5").css('display','block');
            break;
        case 2:
            $(".tr-10").css('display','block');
            break;
        case 3:
            $(".tr-15").css('display','block');
            counter=0;
            break;
    }
});

以下是JSFIDLE：

---

我正在ASP.NET web窗体中执行我的web项目。

尝试将JS代码保存在

document.ready（function（）{…}）

---

问题是：JS代码在DOM准备就绪之前运行。因此，

$（“#按钮”）

没有绑定，因为脚本运行时它没有加载/准备就绪。

您的asp.net Web表单必须已将html呈现为其他类名或id。加载页面后，请检查您是否能够使用

#按钮

，

.tr-5

，

.tr-10

，选择单个元素，

.tr-15

或者不谢谢，把JS代码放在里面解决了问题。

.tr-5{
  display:none 
}

.tr-10{
  display:none 
}

.tr-15{
  display:none 
}

 var counter = 0;

$("#button").bind("click",function() {
        counter++;
    switch(counter){
        case 1:
            $(".tr-5").css('display','block');
            break;
        case 2:
            $(".tr-10").css('display','block');
            break;
        case 3:
            $(".tr-15").css('display','block');
            counter=0;
            break;
    }
});

$(document).ready(function() {
   var counter = 0;

   $("#button").bind("click",function() {
     counter++;
     switch(counter){
       case 1:
         $(".tr-5").css('display','block');
         break;
       case 2:
         $(".tr-10").css('display','block');
         break;
       case 3:
         $(".tr-15").css('display','block');
         counter=0;
         break;
      }
  });
})