jquery addClass and removeClass on Click

Question

I have something like this. Why doesn't this work? I just want the rows with .inactive class to be clickable. And when a row is clicked it should get the .active class.

Sorry for bad coding, jQuery beginner.

JavaScript

$('#shipping_table tr.inactive').on("click",function(){
    $('#shipping_table tr').removeClass("active");
    $('#shipping_table tr').addClass("inactive");

    $(this).removeClass("inactive");
    $(this).addClass("active");

    //Some more stuff

});

HTML

<table id="shipping_table">
   <tr class="active">
      <td>Row 1</td>
   </tr>
   <tr class="inactive">
      <td>Row 2</td>
   </tr>
   <tr class="inactive">
      <td>Row 3</td>
   </tr>
</table>

Answer 1

Try with:

$('#shipping_table').on('click', 'tr.inactive', function(){ });

It will dynamically bind event to all tr.inactive elements if they occurs during the runtime.

Demonstration

Answer 2

you are executing this function only when an onclick occurs on a tr with class .inactive. os if you change the selector it should work.

$('#shipping_table tr').on("click",function(){
   $('#shipping_table tr').removeClass("active");
   $('#shipping_table tr').addClass("inactive");
   $(this).removeClass("inactive");
   $(this).addClass("active");

  //Some more stuff

});

Answer 3

try without class .inactive in the selector, because every tr should be clickable, not only with (initial)class .inactive

$('#shipping_table tr').on("click",function(){  

working fiddle