title: Dropdown, change and click events fire only the first time - jQuery
body: <p>Using jQuery 1.9.1 in a web page &amp; making an AJAX call to return an XML dataset.  The data is loaded into rows in an HTML table.  The first 2 columns contain text information, the 3rd column can contain one of three things:  a Dropdown box, a Submit button, or Text.  The 4th column contains either a Submit button (on rows in which there's a dropdown) or are blank.  </p>
  
  <p>The HTML table is as follows:</p>
  
  <pre><code>&lt;table id="ztable" border="1" cellpadding="1" cellspacing="1"&gt;
    &lt;thead id="zthead"&gt;
    &lt;/thead&gt;
    &lt;tbody id="ztbody&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>The data is loaded to the table in a function that loops through row by row.</p>
  
  <pre><code>var trow = $("&lt;tr class='rows'&gt;"), tbdy=$("#ztbody");
  .....
  $(xml).find("Row").each(function(index) {
  celldata = "&lt;td class='msgTime'&gt;&lt;div class='msgTime " + msgClass + "'&gt;" + msgTime + "&lt;/div&gt;&lt;/td&gt;" + 
  ....
  "&lt;td class='action'&gt;&lt;div class='action " + msgClass + "'&gt;"+ actionDD +"&lt;/div&gt;&lt;/td&gt;" +
  ....
  $(celldata).appendTo(trow);
  trow.appendTo(tbdy);
  </code></pre>
  
  <p>When the page loads for the first time, all the mouse events, click events and change events all fire as they should.</p>
  
  <p>However, once they have fired, I set a switch that forces a re-create of the HTML table.  Once that has executed though, the dropdowns are still there &amp; can be opened, but nothing is selectable.  No buttons respond, no mouse events fire.  </p>
  
  <p>I'm calling the same function that I use to build the table the first time through, but use a <code>$("ztable tbody).empty()</code> to clear out what's there &amp; re-create it.  I know when the table is re-created, that whatever processing I had done on the first table load has taken place &amp; those rows no longer show, but the re-created table - which has the appropriate columns, dropdowns, buttons etc - will allow the dropdown to open (and an item can be selected), but nothing else fires - no mouse events, nothing.  </p>
  
  <p>What needs to happen in order to bind the controls to the re-created page?  Or is there something else I'm doing incorrectly?</p>
  
  <p><em><strong></em>***<em></strong> EDIT <strong></em>**<em>*</em></strong></p>
  
  <p>Per follow-up, I am editing &amp; providing more info on the handlers.  All of these are in the <code>$(document).ready</code>:</p>
  
  <pre><code>$(".choices").mousedown(function() { console.log("mousedown"); })
  $(".choices").mouseover(function() { console.log("mouseover"); })
  $(".choices").mouseout(function() { console.log("mouseout"); })
  $(".choices").mouseup(function() { console.log("mouseup"); })
  
  ....
  
  $(".rows").each(function() {
      var $d = $(this).find(".choices");
      $d.change(function() {
          if ($d.val() &gt; 0) {
              ..... do stuff where dropdown has been selected
           }
      });
  });
  
  
  $(".sBtn").click(function() {
     ..... do stuff where one type button was clicked
     });
  
  $(".rbtn").click(function() {
      .... do stuff where another type button was clicked
     });
  </code></pre>
  
  <p><code>.choices</code> is a class that is assigned to the <code>SELECT</code> dropdowns.
  <code>.rows</code> is a class assigned to the rows in the <code>&lt;tbody&gt;</code> of <code>ztable</code>.
  <code>.sBtn</code> is a class assigned to the button that would be in the 4th column &amp; associated to a dropdown box in the 3rd column.
  <code>.rbtn</code> is a class assigned to buttons that would be in the 3rd column.</p>
  
  <p>Each of the buttons &amp; dropdowns have an ID that is unique to each of them, for example:  <code>choice_M_40</code> &amp; <code>sb_M_40</code> would be on row 1.  <code>choice_M_45</code> &amp; <code>sb_M_45</code> would be on row 2. <code>rb_X_3000</code> would be in column 3 of row 3, etc.  </p>