jQuery的.on()方法无法绑定事件处理程序

Question

我正在尝试为动态变化且没有成功的表格中的每一行附加事件处理程序（使用jQuery版本1.11.0） *编辑：正如许多人指出的那样，“hover”已被弃用，但我的问题也存在于其他处理程序中*

$('#tableBody tbody').on('hover', 'tr', function() {
    alert('hovering on a row');
});

上述代码和jQuery文档中的http://api.jquery.com/on/几乎完全相同。我还尝试了其他变化，比如：

$(document).on('hover', '.tableRow', function(){...});

事件处理程序没有被添加上。 需要注意的是，表格的内容是通过 AJAX 检索并显示的，这就是我使用 .on() 方法的原因。

- Noam

---

v1.11上存在on吗？您是不是指的是1.11.0？1.11版本非常老旧。 - Adrian Preuss

如果您在该页面上搜索 hover，您会看到以下内容：“在jQuery 1.8中被弃用，在1.9中被移除：将名称 hover 用作字符串 mouseenter mouseleave 的简写。” - Felix Kling

@Adrian Preuss，是的，我指的是1.11.0。 - Noam

Answer 1

将字符串 'hover' 作为参数传递给 .on() 方法已不再支持（在.on() 文档的“额外说明”中提到，自v1.9版本已删除）。相当于改用 'mouseenter mouseleave'，或者如果您只想在鼠标进入相关元素时执行某些操作，请尝试使用以下代码：

$('#tableBody tbody').on('mouseenter', 'tr', function() {

请注意，#tableBody 元素需要在运行时存在，因此您需要将其包含在文档就绪处理程序中或将其放置在 body 结束的脚本元素中。

而且，id 'tableBody' 似乎被分配给了 <tbody> 元素，当您的选择器还包括 tbody 作为 #tableBody 的子元素时，这是没有意义的。

- nnnnnn

---

谢谢您指出这一点，但我也尝试过“mouseenter”以及其他事件，比如“click”，但都没有成功。 - Noam

如果您无法将任何事件绑定到动态元素，那就是另一个问题了。在运行.on()代码时，#tableBody元素是否存在？（它需要存在。） - nnnnnn

是的，在页面加载时它确实存在。就像我提到的那样，它也不适用于 $(document).on(...)。 - Noam

#tableBody 元素是 <table> 元素本身，而不是 <tbody> 元素？只有行是动态添加/更改的，<table> 元素本身并没有被替换？这里有一个演示，它确实可以工作：http://jsfiddle.net/LjQqd/ - nnnnnn

就是这样！'#tableBody'被分配给了<tbody>，而不是<table>。谢谢。 - Noam

Answer 2

'

'mouseenter'事件应该可以很好地工作。

'

$('#myTable tbody').on('mouseenter', 'tr', function() {
    alert('hovering on a row');
});

这是 jsfiddle。

- Mehdi Karamosly