title: jQuery 1.7 moving rows back/forth between tables
body: <p>I have two tables that I am trying to move rows between - <code>searchResultsTable</code> and <code>selectedCustomersTable</code>. It is a pretty simple task - just be able to move rows back/forth between the two tables continuously.</p>
  
  <p>I move multiple rows from <code>searchResultsTable</code> into the <code>selectedCustomersTable</code> and vice versa. So the user can continuously move rows back/forth between the two tables using the add and remove buttons.</p>
  
  <p>The add button is when the <code>searchResultsTable</code> has selected rows and you want to move those to the <code>selectedCustomersTable</code>. That works.</p>
  
  <p>The remove button is for selecting rows in the <code>selectedCustomersTable</code> and removing them / moving them back into the <code>searchResultsTable</code>. That doesn't seem to be working. After moving rows back/forth a few times, it seems like the events are lost and it just quits working. I am trying to use the <code>.on</code> event thing in jquery 1.7 but am having no luck. The "move rows between two tables" functionality will not work over and over again. It is like it works one time, then it will not work over and over again.</p>
  
  <p>Here is my jQuery code - can someone see what the matter is and offer a way to get this to work over and over again? Over and over again - meaning - moving rows back/forth between two tables forever if the user desired to do so.</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(function () {
          $('#searchResultsTable').on('click', function (e) {
              bindTableEvents();
          });
          $('#selectedCustomersTable').on('click', function (e) {
              bindTableEvents();
          });
  
          bindTableEvents();
  
  
          function bindTableEvents() {
              var $t1 = $('#searchResultsTable');
              var $t2 = $('#selectedCustomersTable');
              alert('in');
              setupTable($t2);
              setupTable($t1);
          }
  
          function setupTable($table) {
              $table.initializeTable({
                  navigate: {
                      control: { keyboard: true, mouse: true },
                      select: { multiple: true }
                  }
              });
  
              $table.on('mouse', function (e, event) {
                  if (event.which == 1 &amp;&amp; !event.ctrlKey &amp;&amp; !event.shiftKey) {
                      var $selected = $table.selected();
                      if ($selected.length == 1) {
                          !$selected.hasClass('active');
                      }
                  }
              });
  
              $table.on('keyboard', function (e, event) {
                  var $selected = $table.selected();
                  switch (event.which) {
                      case 13:
                          //ENTER
                          if ($selected.length == 1) {
                              !$selected.hasClass('active');
                          }
                          if ($selected.length &gt; 0) {
  
                          }
                          break;
                      case 46:
                          //DELETE
                          if ($selected.length &gt; 0) {
  
                          }
                          break;
                  }
              });
          }
  
          $('#addButton').click(function () {
              var selectedRows = $('#searchResultsTable').selected();
              $('#selectedCustomersTable').append(selectedRows.removeClass('focus').remove());
          });
  
  $('#removeButton').click(function () {
              var selectedRows = $('#selectedCustomersTable').selected();
              $('#searchResultsTable').append(selectedRows.removeClass('focus').remove());
              });
  
      });
  &lt;/script&gt;
  </code></pre>