jQuery - 将 .live 转换为 .on click

Question

可能重复：
jQuery 1.7 - 将live()转换为on()
.live() vs .on()方法

我有以下代码（为了简化，我省略了一些内容），它可以很好地与jquery-1.7一起使用。

$("td.ui-datepicker-week-col a").live("click", function () {
    alert("hello");
});

我正在尝试升级我的代码，以便可以升级我的jQuery包的版本，因此我已将其更改为以下内容。

$("td.ui-datepicker-week-col").on("click", "a", function () {
    alert("hello");
});

这段代码并没有实际作用。它也没有抛出任何错误，因此我无法确定问题出在哪里。

有任何想法吗？

- Tom

---

你确定 td.ui-datepicker-week-col 在页面加载时存在吗？ - 11684

Answer 1

如果一开始没有 "td.ui-datepicker-week-col" 元素，则必须选择一个现有的永久集。例如：

$(document).on("click", "td.ui-datepicker-week-col a", function () {
    alert("hello");
});

与`live`不同，`on`函数仅适用于调用绑定函数时定义的集合。当事件发生时，传递给`on`的选择器的解释是动态的。

- Denys Séguret

---

你打错字了，在 td.ui-datepicker-week-col 前面有一个引号多了。 - 11684

尽管有拼写错误（我相信您会编辑），但这是一个很好的答案，解释得足够简单，让像我这样的蠢人也能理解。谢谢 - Tom

Answer 2

你的on语句的第一部分绑定到那些在调用时已经存在的元素。为了正确使用委托，你需要选择一个在调用时存在的元素，并保证它是事件元素的父元素。如果没有其他选择，你总可以使用document（这也是live所做的！）

$(document).on("click", "td.ui-datepicker-week-col a", function(e) { /*...*/ });

- Plynx

Answer 3

$("body").on("click", "td.ui-datepicker-week-col a", function () {
    alert("hello");
});

- ek_ny

Answer 4

问题可能是在页面加载时DOM中不存在"td.ui-datepicker-week-col"，因此无法附加on事件。

将处理程序附加到父元素，该元素将在JavaScript代码加载时存在。最简单（但效果较差，但可行）的方法是：

$("body").on("click", "td.ui-datepicker-week-col a", function () {
  alert("hello")
})

每次单击文档时都会触发此操作，然后jQuery将验证单击的元素是否为"td.ui-datepicker-week-col a"，如果是，则执行回调函数。

更有效的方法是附加到现有的子容器中，其中"td.ui-datepicker-week-col a"一定存在。

- fiatjaf

Answer 5

试试这个...

$('.ui-datepicker-week-col').on('click', 'a', function () {
    alert("hello");
});

看看这个示例

您好。

- MG_Bautista