在jQuery中，on方法如何处理事件而不像live方法？

Question

我有一个页面，运行时根据情况添加一些控件。

我为表格中的TD元素编写了以下代码，用于mouseover事件：

$(".TableEntry .EntryCell").live("mouseover", function () {
var parent = $(this).parent();
parent.css("background-color", "C4F7C3");
});

它可以正常工作。但根据jQuery文档:

.live()方法已被弃用。请使用.on()方法来附加事件句柄。旧版本的jQuery用户应优先使用.delegate()。

我使用以下代码使用on或delegate，但它不起作用:

$(".TableEntry .EntryCell").on("mouseover", function () {
var parent = $(this).parent();
parent.css("background-color", "C4F7C3");
});

如何使用on或delegate动态添加事件处理程序？

- Arian

---

似乎使用 on 工作正常，你使用的是哪个版本的 jQuery？ - Abdul Munim

Answer 1

您有一个无效的命名变量par，应该是parent。

您需要找到一个已持久化的上级，将事件处理程序绑定到它。

要模拟.live，您需要将其添加到$('body')中。

$("body").on("mouseover", '.TableEntry .EntryCell', function () {
    var parent = $(this).parent();
    parent.css("background-color", "C4F7C3");
});

要将其用作“delegate”，您需要找到一个共同的持久化父级并绑定到它。

$("_persisted_parent_id_tag_etc_").on("mouseover", '.TableEntry .EntryCell', function () {
    var parent = $(this).parent();
    parent.css("background-color", "C4F7C3");
});

---

所以你绑定到$('...')元素上，处理器会应用于你传递的第二个参数所代表的选择器（如果你确实传递了一个选择器）。

- Gabriele Petrioli

Answer 2

我觉得你需要在颜色值前面加上#，就像这样：#C4F7C3，否则你将看不到鼠标悬停时的任何效果。

- Billy Moon