javascript - 使用 jQuery 将事件绑定到表格单元格

Question

这是我的标记：

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

我需要在所有表的mouseenter所有 s 上注册事件td（存在于每个表中div）。

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

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

但我没有收到任何警报。

Answer 1

他们应用事件侦听器的方式很奇怪。

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

另外：缓存 td 元素很好，但是为什么不坚持使用更简单的东西呢？

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

Answer 2

您的事件处理程序未绑定的原因是<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函数的范围内。