用 jquery.on() 替换 jquery.live() 不起作用

Question

我有几个在 ajax 调用后动态添加的文本框。这些框与当前工作正常的 .live() 事件处理程序相关联。我想用更新的 .on() 函数替换它。

这就是我所拥有的

$('.MyTextBox').live({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
});

当我用 .on() 替换 .live() 时，它不起作用；添加后，文本框不会显示其正常行为。

如果我写 $('#MainDiv .MyTextBox').live({... ，其中 MainDiv 是所有操作发生的顶部 DOM 元素，那么也不会发生任何事情。

我错过了什么？

谢谢

Answer 1

这是他们的例子，但有委托：

http://jsfiddle.net/HDtz3/

vs 非委托： http://jsfiddle.net/HDtz3/1/

这就是为什么我讨厌新的语法。

在你的简单做：

$('#MainDiv').on({
  mouseenter: function () { .... },
  mouseleave: function () { .... },
  blur: function () { ... }
}, '.MyTextBox');

它应该可以工作

Answer 2

tl;dr：对于直接换入替换（考虑动态加载），请参阅下面的一般示例。

---

正如其他海报所指出的，接受的答案有效，但 $(#MainDiv') 需要是 "non-dynamic element (not being loading again through ajax)"。这在性能方面是可取的，因为事件冒泡“距离”是有限的。在示例中，它只需要冒泡到要处理的父元素。

解决方案是绑定到不会重新加载的“最父”元素（通常通过 AJAX） - 在示例中，您需要绑定到 $('#MainDiv') 的父元素。

然而，

如果您确实想要直接替换live()，您只需绑定到document 元素即可。

通用示例

格式一：

//Replace:
$(selector).live(events, handler);           // Where `events` is a string

//With:
$(document)  .on(events, selector, handler); 

格式 2：

//Replace:
$(selector).live(events);                    // Where `events` is 
                                             //   an object of `handler`s
//With:                                      //   (as in OP's example)
$(document)  .on(events, selector);

请注意，on() 示例中，selector 的容器可以更改，绑定将自动应用；与live() 的功能相同。

OP的例子（格式2）

//Deprecated live() version:
$('.MyTextBox').live({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
});

//New on() version
$(document).on({
   mouseenter: function () { .... },
   mouseleave: function () { .... },
   blur: function () { ... }
},'.MyTextBox');

Answer 3

Aaron，Matt，我认为您的选择器顺序错误（用于live 转换），请查看on-http://api.jquery.com/on/#example-7 的 API 文档

$("body").on("click", "p", function(){
  //stuff
});

当我尝试您的方法时（我来这里寻找更新核心版本的解决方案），控制台错误弹出所有内容（1.8、1.9 和 2.0）。目标元素应该是第二个参数而不是最后一个。不知道为什么您的答案已被接受，因为它不起作用。希望这会有所帮助。