title: jQuery delegate not firing on dynamically created table
body: <p>I have the following code that resides in my .js file</p>
  
  <pre><code>//This is the row highlighting for the results table
  $(document).ready(function () {
      $("table").delegate('td', 'mouseover mouseleave', function (e) {
          if (e.type == 'mouseover') {
              $(this).parent().addClass("hover");
  
          } else {
              $(this).parent().removeClass("hover");
          }
      });
  });
  </code></pre>
  
  <p>It basically adds and removes a style to a table row.
  This works perfectly for tables that are created are runtime. </p>
  
  <p>However for tables that are dynamically created it doesn't do a thing.
  This is how a table is being created.</p>
  
  <pre><code>//This function is called from the homepage, it calls for XML to be passed and renders the table with
  //Existing enquiries
  function loadEnqData() {
  
  //Display ajax load graphic
  showLoading('.enqLoading');
  
  //Build results table, ready to receive results.
  $('.enqResults').append('&lt;table id="enqTable" class="enqTable"&gt;&lt;thead&gt;&lt;tr&gt;&lt;th&gt;' + textlib.get('lblEnqDate') + '&lt;/th&gt;&lt;th&gt;' + textlib.get('lblEnqUser') + '&lt;/th&gt;&lt;th&gt;' + textlib.get('lblEnqClientName') + '&lt;/th&gt;&lt;th&gt;' + textlib.get('lblEnqDetails') + '&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;/tbody&gt;&lt;/table&gt;');
  
  //URL for XML data
  var strURL = "enqData.aspx";
  if (debug) {
      $.jGrowl('url= ' + strURL);
  }
  //Ajax call
  $.ajax({
      type: "GET",
      url: strURL,
      dataType: "xml",
      timeout: 30000,
      success: function (xml) {
          //process XML results for each xml node
          $(xml).find('row').each(function () {
  
              if (debug) {
                  $.jGrowl('Returned id of ' + $(this).attr('id'));
              }
  
              //Set data variables
              var strEnqID = $.trim($(this).attr('id'));
              var strEnqDate = $.trim($(this).attr('DateTimeLogged'));
              var strEnqClient = $.trim($(this).attr('Client_Name'));
              var strEnqDetails = $.trim($(this).attr('Work_Details'));
              var strEnqUsername = $.trim($(this).attr('username'));
  
              //Add in a data row to the results table.
              $('#enqTable &gt; tbody:last').append('&lt;tr onclick="selectEnq(\'' + strEnqID + '\');"&gt;&lt;td&gt;' + strEnqDate + '&lt;/td&gt;&lt;td&gt;' + strEnqUsername + '&lt;/td&gt;&lt;td&gt;' + strEnqClient + '&lt;/td&gt;&lt;td&gt;' + strEnqDetails + '&lt;/td&gt;&lt;/tr&gt;');
          });
          //Tidy up
          $('.enqLoading').empty();
  
          //Enable sorting
          $(document).ready(function () {
              $("#enqTable").tablesorter();
          }
      );
          //Catch errors
      },
      error: function (XMLHttpRequest, textStatus, errorThrown) {
          $.jGrowl("Error Please contact IT support - " + XMLHttpRequest.responseText + " " + XMLHttpRequest.status + " " + textStatus + " " + errorThrown, { sticky: true });
  
      }
  });
  
  
  }
  </code></pre>
  
  <p>To summarise, this function creates a new table in my enqResults div, runs an ajax query, and adds rows to the tbody of the table with this code
       $('#enqTable > tbody:last').append</p>
  
  <p>Why can delegate not bind to these elements?</p>