javascript - jQuery - 将 .live 转换为 .on 点击

Question

可能重复：
jQuery 1.7 - 将 live() 转换为 on()
.live() 与 .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");
});

但这并没有做任何事情。它也不会抛出任何错误，所以我看不出问题出在哪里。

有任何想法吗？

Answer 1

如果您在开始时没有"td.ui-datepicker-week-col"元素，那么您必须选择现有的永久集。例如

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

on与 相反，该函数live仅适用于调用绑定函数时定义的集合。on动态的是当事件发生时作为参数传递的选择器的解释。

Answer 2

on语句的第一部分绑定到调用时已经存在的元素。要正确使用委托，您需要选择一个当时存在的元素，并保证是事件元素的父元素。如果不出意外，您可以随时使用document（这也是这样live做的！）

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

Answer 3

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

将处理程序附加到父元素，该元素将在 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"是肯定的。

Answer 4

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

Answer 5

尝试这个...

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

并看到这个例子

问候。