jQuery script not working in web forms

Question

I made a simple jQuery to change css of row in table. I made it in JSFiddle and it's working perfectly there but when I put it into my web project it's not working.

Code here:

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

Here is JSFiddle: https://jsfiddle.net/37z2ww24/28/

I'm doing my web project in ASP.NET Web Forms.

Your asp.net webform must have rendered the html into some other class name or id. Once your page is loaded, check whether you are able to select single elements with #button, .tr-5, .tr-10, .tr-15 or not — Paritosh
– Paritosh, Commented Mar 19, 2018 at 7:06

Sajib Khan · Accepted Answer · 2018-03-19 07:27:09Z

1

Try keeping your JS code inside 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;
      }
  });
})

Problem was: JS code was running before the DOM is ready. So, $("#button") was not binding since it was not loaded/ready while the script running.

edited Mar 19, 2018 at 7:27

answered Mar 19, 2018 at 7:08

Sajib Khan

24.4k9 gold badges69 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

L.Johnson Over a year ago

Thank you, keeping JS code inside solved the problem.

Collectives™ on Stack Overflow

jQuery script not working in web forms

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related