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 窗体中做我的网络项目。

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

问题是： JS 代码在 DOM 准备好之前运行。所以，$("#button") 没有绑定，因为它在脚本运行时没有加载/准备好。