Toggling a class fails in a ajax table

Question

I have this html table

<table id="search" class="order-table table table-striped">
      <thead>
        <tr>
          <th>#</th>
          <th>Group Title</th>
          <th>Group Name</th>
        </tr>
      </thead>
      <tbody id="in_modal">

      </tbody>
    </table>

which i am getting the rows from the server with

    var baseurl = "<?php print base_url('index.php/enterprise/get_all_groups'); ?>";
    $.ajax({
  type: "GET",
  url: baseurl,
  success: function(data){
     $('#in_modal').html(data);
  }
    });

and then using

$( "tr" ).on( "click", function() {
        $(this).toggleClass('selected').siblings().removeClass("selected");
    });

to toggle the class selected on click.What i want is when i clcik a row,that table is given the class selected and the class is removed from the old row and given to the new clicked row when i click on another row.

When i try clicking any row,this does not highlight any row.How can i highlight a row on click?.

Answer 1

Try this

 $( "tr" ).on( "click", function() {
    $("tr").removeClass("selected");
    $(this).toggleClass('selected');
});