title: JQuery losing initial click event when reloading a table via .load() after a .change() handler
body: <p>I am working with a complex application where there are two divs each of which contain the HTML/JS of a separate page.  Each div is loaded in a <code>$(document).ready()</code> script.  The top div contains a table and the bottom div contains a form.</p>
  <p>The two pages are bound (linked) in that if you click on a row in the table it highlights that town and loads that rows data into the form by refreshing the forms div.  Also, if you change (edit) any of the fields in the data form it will automatically refresh the table by reloading the HTML for the table with the currently selected row in that table remaining selected.</p>
  <p>Because of the design of the larger system I don't really have any control over the basic approach (two divs both being reloaded on the fly to reflect the changes in the other). Both files are actually not bound to each other but rather to a database which is used in the MVC design.</p>
  <p>In my application everything is working just fine... click on a row at the top and you get the data below.  Change a value in the form and then cause a <code>change()</code> event to fire (hit <kbd>tab</kbd>, click off the field, etc) and the table above is refreshed.  C'est tres beaux.</p>
  <p>Except... there is one small bug which is when you cause the <code>change()</code> event to fire by clicking on a row in the table everything works correctly except that the row you clicked on does not get the initial click event and the row does not get highlighted.</p>
  <p>This is presumably because the refresh of the table page causes the click event to fail when it finally gets resolved (after the <code>change()</code> event).  I figured that I could probably save the identity of the row that was clicked in a cookie or something and then on the <code>ready()</code> function of the load have it check but I can not for the life of me trap that initial event anywhere.</p>
  <p>I've created a much simpler version of the problem which fails in the same way and <strong>created a fiddle at <a href="http://jsfiddle.net/AKirino/cdhqmp2z/" rel="nofollow noreferrer">http://jsfiddle.net/AKirino/cdhqmp2z/</a>.</strong></p>
  <p>Due to some problems with the fiddle not executing the <code>ready()</code> code in the table file I've moved all the js to the base file.  I've also integrated the form portion into the main page to simplify things.</p>
  <p>In the test code you can:</p>
  <ol>
  <li>Click on a row in the table and see the text of that row appear in the lower window.</li>
  <li>Change a value in the lower window, then hit tab or click off it and it will appear in the table.</li>
  <li>However, if you change a field in the form then cause the <code>change()</code> event to fire by clicking on a row in the table, the table row does not highlight.</li>
  </ol>
  <p><em><strong>Is there any way to trap the initial event of clicking on the row before the page is refreshed?</strong></em></p>
  <p>Here is my original (pre fiddle) test code.  I am working in Safari on OSX and using query-1.9.1.</p>
  <p>CSS:</p>
  <pre><code>div {padding:1em; text-align:center;}       
  div.page_container {background-color:#C4C4C4; max-width: 80%; margin-left: auto; margin-right: auto;}
  div.table_area       {background-color:#ffffc0;}
  div.working_area     {background-color:#c00000;}
      
  table, form          {width:15em; margin:0 auto;}
  tr.selected          {background-color:#ffffff}
  td                   {border: 1px solid; padding:.25em;}
  </code></pre>
  <p>BaseFile:</p>
  <pre><code>&lt;html&gt;&lt;head&gt;
  &lt;meta charset='utf-8'&gt;
  &lt;script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;refreshTest.css&quot; type=&quot;text/css&quot; /&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  $(document).ready(
      
      function( ) {
  
          $('div.table_area').load('refreshTestTable.html');
  
          $('input').change(function(event) {
              
              var id = $(this).attr('id');
              console.log('datachanged: '+id);
          
              var myValue = $(this).val();
              $('tr#'+id+' td').html(myValue);
              
              $('div.table_area').load('refreshTestTable.html');
  
          });     
      });
              
  &lt;/script&gt;
  
  &lt;div class='page_container'&gt;
  
      &lt;div class='table_area'&gt;&lt;/div&gt;                
      &lt;div class='working_area'&gt;
      
          &lt;form id='galleryForm'&gt;
              &lt;label for='field1'  id='field1_label' &gt;Field1: &lt;/label&gt;&lt;input id='field1' autocomplete=&quot;off&quot; value='This is field 1' /&gt;&lt;br /&gt;
              &lt;label for='field2'  id='field2_label' &gt;Field2: &lt;/label&gt;&lt;input id='field2' autocomplete=&quot;off&quot; value='This is field 2' /&gt;&lt;br /&gt;
              &lt;label for='field3'  id='field3_label' &gt;Field3: &lt;/label&gt;&lt;input id='field3' autocomplete=&quot;off&quot; value='This is field 3' /&gt;&lt;br /&gt;
          &lt;/form&gt;
      
          &lt;div id=&quot;console&quot;&gt;&amp;nbsp;&lt;/div&gt;
      
      &lt;/div&gt;
      
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>TableFile:</p>
  <pre><code>&lt;html&gt;&lt;head&gt;&lt;script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'&gt;&lt;/script&gt;&lt;/head&gt;
  &lt;body&gt;
  
  &lt;script&gt;
  $(document).ready(
  
  function( ) {
  
      $('table').delegate('tr', 'click', function(evt){
          
          var id = $(this).attr('id');
          var myLogMsg = 'tr click: '+id;
          console.log(myLogMsg);
          
          $('tr').removeClass('selected');    // Unselect all
          $(this).addClass('selected');       // Select clicked row
          
          $('div#console').html(myLogMsg);
      });
      
      $('input').each(function(){
          
          var myId = $(this).attr('id');
          $('tr#'+myId+' td').html($(this).val());
      });
  });
              
  &lt;/script&gt;
  
      &lt;table&gt;
      &lt;tr id='field1'&gt;&lt;td&gt;fill1&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id='field2'&gt;&lt;td&gt;fill2&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id='field3'&gt;&lt;td&gt;fill3&lt;/td&gt;&lt;/tr&gt;
      &lt;/table&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>