title: jquery toggel active and inactive work only first time
body: <p>I want active and inactive users in the table. I want send a ajax request for same method. First i want to toggel active and inactive class in same anchor tag. I do that first. </p>
  
  <p>This is html</p>
  
  <pre><code>&lt;tbody&gt;
      &lt;tr&gt;
          &lt;td&gt;Dinuka Perera&lt;/td&gt;
          &lt;td&gt;User is active&lt;/td&gt;
          &lt;td&gt;&lt;a href="javascript:void(0)" class="inactive"&gt;Activate&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Thilanga Perera&lt;/td&gt;
          &lt;td&gt;User is inactive&lt;/td&gt;
          &lt;td&gt;&lt;a href="javascript:void(0)" class="active"&gt;Dectivate&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;Test Perera&lt;/td&gt;
          &lt;td&gt;User is active&lt;/td&gt;
          &lt;td&gt;&lt;a href="javascript:void(0)" class="inactive"&gt;Activate&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>js </p>
  
  <pre><code>$('.active').on('click', function () {
      $(this).html('Activate');
      $(this).removeClass('active');
      $(this).addClass('inactive');
  });
  
  $('.inactive').on('click', function () {
      $(this).html('Deactivate');
      $(this).removeClass('inactive');
      $(this).addClass('active');
  });
  </code></pre>
  
  <p>I did it earlier using <code>live()</code> function. But now jquery remove live function. So i used <code>on()</code>. But it is just working only for first time. What is the issue?</p>