Question

可能重复：
  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");
});

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

有什么想法吗？

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语句的第一部分绑定到呼叫时已存在的元素。要正确使用委托，您需要选择当时存在的元素，并保证是event元素的父元素。如果不出意外，您可以随时使用document（这也是live所做的！）

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

Answer 3

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

Answer 4

问题可能是，在加载页面并附加了"td.ui-datepicker-week-col"事件时，DOM中没有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"附加到现有的子容器中。

Answer 5

试试这个......

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

并查看此Example

问候。