jQuery脚本无法在Web表单中使用

Question

我做了一个简单的jQuery来更改表中行的CSS。 我在JSFiddle中制作了它，并且在那儿工作得很好，但是当我将其放入我的Web项目中时，它就无法工作。

代码在这里：

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 Web窗体进行Web项目。

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")没有绑定，因为脚本运行时未加载/就绪。