title: jquery moving rows dynamically with .on
body: <p>I'm attempting to move rows between two tables, but I cannot get it to keep the click event bound to it. I'm confused on the selector part on the <code>.on</code> event I'm not sure what I'm supposed to be targeting with that. </p>
  
  <p>Basically I can get it to move to one table, and back but then it losses the click property. Not sure why.</p>
  
  <p>I've attached a fiddle(<a href="http://jsfiddle.net/Yjqkn/216/" rel="nofollow">http://jsfiddle.net/Yjqkn/216/</a>) to make the problem clearer. The approve button moves it down, and the waitlist button moves it back, but then it loses all event listeners do I need to rebind them with <code>.bind</code> What is the best way to solve this.</p>
  
  <p>I tried : <code>.on("click","button.remove-participant",function()</code> didn't work</p>
  
  <h2>Javascript</h2>
  
  <pre><code>$( ":button" ).on("click",function(){
  
      if($(this).hasClass('remove-participant')) {
          $(this).removeClass('remove-participant').addClass('add-participant');
          $(this).html('Approve');
          var current_row = $(this).closest('tr').html();
  
          $('.table_2 &gt; tbody:last').append('&lt;tr&gt;'+current_row+'&lt;/tr&gt;');
          $(this).closest('tr').remove();
  
          $( ".table_2 .add-participant" ).bind( "click", function() {
              $(this).removeClass('add-participant').addClass('remove-participant');
              var current_row = $(this).closest('tr').html();
              $(this).html('Waitlist');
  
              $('.table_1 &gt; tbody:last').append('&lt;tr&gt;'+current_row+'&lt;/tr&gt;');
              $(this).closest('tr').remove();
          });
      }
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;table class="table_1"&gt;
    &lt;tr&gt;
      &lt;th&gt;Info Header 1&lt;/th&gt;&lt;th&gt;Info Header 2&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tbody&gt;
      &lt;tr&gt;&lt;td&gt;Don&lt;/td&gt;
        &lt;td&gt;&lt;button class="remove-participant" name=""&gt;Remove&lt;/button&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  &lt;table class="table_2"&gt;
    &lt;tr&gt;
      &lt;th&gt;Info Header 1&lt;/th&gt;&lt;th&gt;Info Header 2&lt;/th&gt;
    &lt;/tr&gt;
    &lt;tbody&gt;
      &lt;tr&gt;&lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>