javascript - 如何使用 ON 而不是 LIVE

Question

可能重复：
jQuery 1.7 - 将 live() 变成 on()

我有 jQuery：

          $(".house td[red]").live("click", function() {
              alert('ok');
          });

但函数live已被弃用。我如何使用？

          $(".house td[red]").on("click", function() {
              alert('ok');
          });

不工作。

Answer 1

 $(".house").on("click", 'td[red]', function() {
              alert('ok');
          });

你试过这个吗？您可以查看文档以获取详细信息。那里的例子：

$("#dataTable tbody").on("click", "tr", function(event){
    alert($(this).text());
});

所以你基本上为包装器传递了一个“容器”。不推荐live的原因是它可以写​​成这样的“on”语法：

$(document).on("click", '.house td[red]', function() {
              alert('ok');
          });

你可以看到效率不是很高。可能还有更多:) 所以你想改变它是件好事。

Answer 2

将其用作 -

$(document).on("click", ".house td[red]", function() {
  alert('ok');
});

更有效的方法是使用.on()元素的直接父级 -

$('.house').on("click", "td[red]", function() {
      alert('ok');
});

阅读此处live以更好地理解和之间的区别on

Answer 3

on()是一个万事俱备的功能，可以以不同的方式工作——包括直接事件和委托事件。live()是实现委托事件的一种手段。这是on()通过将过滤器作为参数 2 传递并将回调传递到参数 3 来实现的：

$(".house").on("click",  'td[red]', function() {
    alert('ok');
});

Answer 4

$(".house td[red]").live("click", function() {
    alert('ok');
});

将直接转换为：

$(document).on("click", ".house td[red]", function() {
    alert('ok');
});

但是您可以通过指定绑定时已知的最近的容器来获得一些性能：

$('#someContainer').on("click", ".house td[red]", function() {
    alert('ok');
});

Answer 5

$(document).on('click', '.house td[red]', function(){
    alert('ok');
});

Document 是我们希望将处理程序附加到的静态元素。

第一个参数是事件

第二个参数是选择器

第三个参数是您希望在触发事件时针对选择器运行的函数。

Answer 6

这是一个三参数变体，您可以选择“气泡”点：

$('body').on('click', '.house td[red]', function() { alert("ok"); });

不同之处在于，实际事件处理程序的放置点在您的控制之下（就像使用also-deprecated 一样.delegate()）。您可以选择您喜欢的任何父元素，这在复杂页面中是一个不错的功能。（例如，在您的情况下，您可以将处理程序放在所有“.house”元素而不是主体上。）

Answer 7

尝试这个，

$(document).on("click", ".house td[red]", function() {
     alert('ok');
});

Answer 8

$(document).on("click",".house td[red]",function(){
     alert('ok');
});