事件綁定到使用jQuery

Question

這是我的標記表格單元格：

<div id="divContainer"> 
    <div> 
     <table></table> 
    </div> 
    <div> 
     <table></table> 
    </div> 
    .... 
</div> 

我需要在所有td S中所有表（即分別存在div內）的註冊mouseenter事件。

$(document).ready(function() { 
    $allTds = $('#divContainer').find("tr").find("td"); 
    ... 
    SomeFunction(); 
}); 

function SomeFunction(){ 
    $allTds.on({ 
     mouseenter: function (e) { 
      alert('hover'); 
     } 
    }); 
} 

但我沒有收到任何警報。

Answer 1

您的事件處理程序不被束縛的原因是，當你進入文件準備好處理程序不存在<td>元素。

您應該爲此使用事件委託。例如

window.jQuery(function($) { 
    $('#divContainer').on({ 
     mouseenter: function(e) { 
      alert('hover'); 
     } 
    }, 'td'); 
}); 

通過這種方式，它是#divContainer元素偵聽事件，並作用於他們，如果他們從<td>起源。

見http://api.jquery.com/on/#direct-and-delegated-events

也有在$allTds變量僅在文檔準備好處理程序確定的，並不是在SomeFunction功能的範圍範圍界定問題。

Answer 2

他們應用事件監聽器的方式很奇怪。

$('#divContainer').on('mouseenter','td',function() { 
    alert('mouse entered'); 
}); 

另外：緩存td元素很好，但爲什麼不堅持更簡單的東西呢？

$allTd = $('#divContainer td');