jQuery脚本无法在web窗体中工作

Question

我制作了一个简单的jQuery来更改表中行的css。我用JSFiddle制作了它，它在那里工作得很好，但是当我把它放到我的网络项目中时，它就不起作用了。

这里的代码：

HTML：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <button type="button" class="Buttons" id="button">Add row</button> 

    <table class="tg">
    <tr class="tr-5"><td>tr1</td></tr>
    <tr class="tr-10"><td>tr2</td></tr>
    <tr class="tr-15"><td>tr3</td></tr>
    </table>

CSS：

.tr-5{
  display:none 
}

.tr-10{
  display:none 
}

.tr-15{
  display:none 
}

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;
    }
});

这是JSFiddle：https://jsfiddle.net/37z2ww24/28/

我正在用ASP.NET网络表单做我的网络项目。

Answer 1

尝试将JS代码保存在document.ready(function(){...})中

$(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;
      }
  });
})

问题是:在DOM准备就绪之前， JS代码正在运行。因此，$("#button")没有绑定，因为它在脚本运行时没有加载/准备就绪。