Question

可能重复：
jquery: on vs live

我的代码使用$('thing').live("mousemove", function(e) {和$('thing').live({mouseenter:function(e) {工作得很好。我注意到jquery说live被折旧并使用on所以我做了。然而，它似乎没有像我期望的那样工作。我有mousemove事件，但由于对象是动态加载的，事件没有触发，这就是我使用live的原因。现在生活完美，但当我使用on作为jquery建议它似乎表现得像.mousemove等。它适用于执行代码时存在的对象，而不是动态添加的事件（我使用直播的全部原因）。

有没有办法告诉你像现场一样行动并在新对象上添加事件？或者我是否使用直播？

Answer 1

如果您希望它适用于动态添加的元素，则需要委派

$(anyStaticParent).on("mousemove", "thing", function() {

     // You code Here
});

anyStaticParent 可以是thing的任何父容器。为了更加通用，您可以始终将其设置为body

此外，我发现'thing'不是特定元素..

使用'.thing' - 如果是Class

'#thing' - 如果ID

Answer 2

您只需以正确的方式致电.on：$(document).on(event, selector, handler)：

// Use an element that exist, like document or "body".
$(document).on("mousemove", "thing", function() {
  // Do something here...
});

检查jquery docs中的最后三个示例。

Answer 3

你必须以不同的方式实现on，所以它的行为类似于live，并以选择器作为参数将其绑定到文档：

$(document).on("mousemove", 'thing', function(e) { ... });

Answer 4

使用.on进行委派的方法是传入动态添加元素的选择器。

$('thing').on('mousemove', 'dynamically added thing', function(e) {
    //handler
});

对于一个不太抽象的例子：

$("ul#menu").on("click", "li", function(event){
    //handler
});

根据API，http://api.jquery.com/on/：

.on( events [, selector] [, data], handler(eventObject) )

.on( events-map [, selector] [, data] )

如果省略selector或为null，则事件处理程序称为直接绑定或直接绑定。每次在所选元素上发生事件时都会调用该处理程序，无论它是直接发生在元素上还是来自后代（内部）元素的气泡。

提供selector时，事件处理程序称为委托。当事件直接发生在绑定元素上时，不会调用处理程序，但仅适用于与选择器匹配的后代（内部元素）。 jQuery将事件从事件目标起泡到附加处理程序的元素（即最里面到最外层的元素），并为该路径上与选择器匹配的任何元素运行处理程序。

jquery on取代直播？

4 个答案: