Jquery将.live更改为.on

Question

我正在尝试将所有的.live()更改为.on()，因为前者现在已经被弃用。

但是我不太明白它是如何工作的。在此之前，我使用了这段代码，它可以正常运行...

$('#lightBoxClose').live('click', function() {
    $('#lightBox').fadeOut();
});

所以我尝试将其更改为：

$('#lightBoxClose').on('click', function() {
    $('#lightBox').fadeOut();
});

但它无法运行，可以有人解释一下我应该做什么，谢谢。

- cgwebprojects

---

可能是重复问题：https://dev59.com/2Wsz5IYBdhLWcg3wOVL5 - Sujit Agarwal

请参见http://api.jquery.com/on/底部的示例。 - Dana Benson

Answer 1

需要在绑定时绑定到已经存在的元素，将目标选择器作为第二个参数传递。该元素必须是最终点击目标的祖先元素，以便它可以捕获冒泡事件。这种技术称为委派。

例如，使用 document 元素：

$(document).on('click', '#lightBoxClose', function() {
    $('#lightBox').fadeOut();
});

- bfavaretto

---

真的吗？那太令人失望了。为什么它不默认绑定到窗口呢？ - Anthony

@Anthony，因为.on()不仅仅是替换.live()，它现在是绑定所有事件的标准方式。因此，它不能通过假设您总是要绑定到document来强制委派。（注意：您无法绑定到window对象，因为DOM事件将不会到达它。） - bfavaretto

如果是这种情况，那么像.click()这样的绑定简写函数是否会在附加到现有元素时起作用呢？比如$(document).$('.my_controllers').click("blah")？这似乎有点过分：a）必须事先建立父级，当没有特定面板时，每个人都将使用“文档”；b）必须丢失事件特定的简写方法，使jquery更易于查看和编写。似乎它正在远离我所认同的懒惰和软弱的方式。 - Anthony

@Anthony，像.click()这样的简写方法并没有被弃用，我一直在使用它们。只是.on()现在结合了live、bind和delegate的功能，所以他们鼓励使用它。 - bfavaretto

它们可能没有被弃用，但它们从未动态绑定到新元素，并且随着jQuery变得越来越复杂，这种需求越来越高，会发生两件事：1）经验不足的开发人员在事件方法不起作用时会碰壁，2）更有经验的开发人员将始终使用.on()作为一种习惯。别误解我，拥有一个未来绑定方法胜过三个，我只是希望监听器列表是一个活动节点列表，而不是订阅模型。 - Anthony

Answer 2

在发帖之前，请使用搜索功能，因为该问题已经在SO上发布过了。

请参阅：JQuery将应用程序从“live”方法切换到“on”方法

$(document).on('click', '#lightBoxClose', function() {
    $('#lightBox').fadeOut();
});

- jeremyharris