jQuery的委託不開火動態創建的表

Question

我必須駐留在我的.js下面的代碼文件

//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"); 
     } 
    }); 
}); 

它基本上添加和刪除一個樣式錶行。 這對於在運行時創建的表非常適用。

但是，對於動態創建的表，它不會執行任何操作。 這是如何創建一個表。

//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('<table id="enqTable" class="enqTable"><thead><tr><th>' + textlib.get('lblEnqDate') + '</th><th>' + textlib.get('lblEnqUser') + '</th><th>' + textlib.get('lblEnqClientName') + '</th><th>' + textlib.get('lblEnqDetails') + '</th></tr></thead><tbody></tbody></table>'); 

//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 > tbody:last').append('<tr onclick="selectEnq(\'' + strEnqID + '\');"><td>' + strEnqDate + '</td><td>' + strEnqUsername + '</td><td>' + strEnqClient + '</td><td>' + strEnqDetails + '</td></tr>'); 
     }); 
     //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 }); 

    } 
}); 


} 

總之，這個功能在我enqResults DIV創建一個新表，運行一個AJAX的查詢，添加行的表TBODY與此代碼 $（「＃enqTable> TBODY：去年」） .append

爲什麼委託不能綁定到這些元素？

Answer 1

從代碼的外觀看來，您也會動態地附加table元素 - 這是問題所在。 delegate()方法的主要選擇器必須是一個靜態元素 - 即，在頁面加載時出現的元素以及頁面的整個生命週期中。

我可以看到你的附加表的.enqResults元素，考慮到這一點，試試這個：

//This is the row highlighting for the results table 
$(document).ready(function() { 
    $(".enqResults").delegate('table td', 'mouseover mouseleave', function (e) { 
     if (e.type == 'mouseover') { 
      $(this).parent().addClass("hover"); 

     } else { 
      $(this).parent().removeClass("hover"); 
     } 
    }); 
});