用 jquery.on() 替换 jquery.live() 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8161691/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
replacing jquery.live() with jquery.on() doesn't work
提问by frenchie
I have several textboxes that are added dynamically after an ajax call. These boxes are tied to event handlers with .live() that currently work fine. I want to replace that with the newer .on() function.
我有几个在 ajax 调用后动态添加的文本框。这些框通过 .live() 绑定到当前工作正常的事件处理程序。我想用更新的 .on() 函数替换它。
This is what I have
这就是我所拥有的
$('.MyTextBox').live({
mouseenter: function () { .... },
mouseleave: function () { .... },
blur: function () { ... }
});
When I replace .live() with .on() it doesn't work; the textboxes don't display their normal behavior after they're added.
当我用 .on() 替换 .live() 时，它不起作用；添加文本框后，它们不会显示其正常行为。
If I write $('#MainDiv .MyTextBox').live({..., where MainDiv is the top DOM element where all the action happens, nothing happens either.
如果我写 $('#MainDiv .MyTextBox').live({...，其中 MainDiv 是所有操作发生的顶级 DOM 元素，也不会发生任何事情。
What am I missing?
我错过了什么？
Thanks
谢谢
回答by Matt
Heres the example they have, but with the delegate:
这是他们的例子，但有委托：
vs non-delegate: http://jsfiddle.net/HDtz3/1/
与非委托：http: //jsfiddle.net/HDtz3/1/
This is why i hate the new on syntax.
这就是为什么我讨厌新的语法。
In yours simply do:
在你的只是做：
$('#MainDiv').on({
mouseenter: function () { .... },
mouseleave: function () { .... },
blur: function () { ... }
}, '.MyTextBox');
and it should work
它应该工作
回答by Aaron Blenkush
tl;dr: For direct swap-in replacement (accounts for dynamic loading), see the General Examplebelow.
tl;dr：对于直接换入替换（考虑动态加载），请参阅下面的一般示例。
As other posters have noted, the accepted answer works, but $(#MainDiv')needs be a "non-dynamic element (not being loading again through ajax)". This is preferable performance-wise, as the event bubbling "distance" is limited. In the example, it only needs to bubble up to it's parent element to be handled.
正如其他海报所指出的，接受的答案有效，但$(#MainDiv')需要是“非动态元素（不会通过 ajax 再次加载）”。这在性能方面更可取，因为事件冒泡“距离”是有限的。在示例中，它只需要冒泡到要处理的父元素。
The solution would be to bind to the "parent-most" element that is not going to be reloaded (via AJAX usually) - in the example, you'd need to bind to $('#MainDiv')'s parent.
解决方案是绑定到不会重新加载的“最父”元素（通常通过 AJAX） - 在示例中，您需要绑定到$('#MainDiv')的父元素。
However,
然而，
If you dowant a direct swap-in replacement for live(), all you need to do is bind to the documentelement instead.
如果您确实想要直接换入替换live()，您需要做的就是绑定到document元素。
Generic examples
通用示例
format 1:
格式一：
//Replace:
$(selector).live(events, handler); // Where `events` is a string
//With:
$(document) .on(events, selector, handler);
format 2:
格式2：
//Replace:
$(selector).live(events); // Where `events` is
// an object of `handler`s
//With: // (as in OP's example)
$(document) .on(events, selector);
Note that with the on()examples,selector's container(s) can change and the binding will be automatically applied; the same functionality as live().
请注意，在on()示例中，selector的容器可以更改并且绑定将自动应用；相同的功能live()。
OP's example (format 2)
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');
回答by Joe H
Aaron, Matt, I think you've got the selector in the wrong order (for a liveconversion), Have a look at the API documentation for on- http://api.jquery.com/on/#example-7
Aaron，Matt，我认为您的选择器顺序错误（用于live转换），请查看 API 文档on- http://api.jquery.com/on/#example-7
$("body").on("click", "p", function(){
//stuff
});
When I tried your method (I came here looking for a solution for updating my core version), console errors popped up for everything (1.8, 1.9 and 2.0). The target element should be the second parameter not the last. Not sure why your answer has been accepted as it doesn't work. Hope this helps.
当我尝试您的方法时（我来这里是为了寻找更新我的核心版本的解决方案），所有内容（1.8、1.9 和 2.0）都出现了控制台错误。目标元素应该是第二个参数而不是最后一个。不确定为什么您的答案已被接受，因为它不起作用。希望这可以帮助。
