jQuery - 将 .live 转换为 .on 点击 [重复]答案

【问题标题】：jQuery - Converting .live to .on click [duplicate]jQuery - 将 .live 转换为 .on 点击 [重复]
【发布时间】：2013-01-16 16:03:09
【问题描述】：

可能重复：
jQuery 1.7 - Turning live() into on()
.live() vs .on() method

我有以下代码（为此我已对其进行了简化）与 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");
});

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

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案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"，如果为 true，则执行回调。

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

【讨论】：

【解决方案5】：

试试这个...

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

看看这个Example

您好。

【讨论】：