jQuery:使用委托时链接()
在过去,我曾经将live()
调用链接成功,例如:
$(".something") .live("click", function(e) { ... }) .live("change", function(e) { ... }) .live("submit", function(e) { ... });
这些天, live()
, bind()
和delegate()
已被shiny的新on()
所取代。
我试过用on()
替换live()
on()
这看起来很明显:
$(".something") .on("click", function(e) { ... }) .on("change", function(e) { ... }) .on("submit", function(e) { ... });
但是,当您考虑on()
如何工作时,这几乎是显而易见的。 这来自http://api.jquery.com/on/ :
“事件处理程序仅绑定到当前选定的元素;它们必须存在于代码调用.on()时页面上。”
根据jQuery文档,我需要绑定到document
并委托.something
来处理实时事件。 不幸的是,这意味着如果我想在on()
复制上面的内容,我最终会重复我的委托选择器( .document
on()
:
$(document) .on("click", ".something", function(e) { ... }) .on("change", ".something", function(e) { ... }) .on("submit", ".something", function(e) { ... });
这可以按预期工作,但我真的很想能够像使用live()
一样更清晰地链接。 我错过了什么吗?
我相信你可以这样做:
$(document).on({ "click" : function(e) { ... }, "change" : function(e) { ... }, "submit" : function(e) { ... } }, ".something");
也就是说,使用“events-map”语法指定事件及其处理程序,然后指定用于委托样式行为的选择器。
据我了解你的问题,你想要的东西就像live()
一样短。 使用on()
你需要多写一点,但如果动态添加.something
那么你还有另一个选项也可以委托事件。
var $div = $('', { 'class': 'something', click: function () { ... }, change: function () { ... } }) // Already has events attached // no need to delegate $div.appendTo('body')
.live()
有很多问题。 其中之一就是当你运行代码时它正在评估选择器".something"
,但后来没有使用结果(例如浪费),然后在事件发生时在运行时重新评估(就像它需要工作一样)正确)。
另外.live()
强制所有动态事件都在document
对象上,如果你有很多动态事件处理程序,这可能会减慢事件处理速度。 另一方面, .on()
允许您选择一个更接近实际对象的静态父级,并将事件处理程序附加到该对象,以便可以将更靠近源和不同对象的不同动态事件处理程序连接到当有很多事件处理程序时,它们的运行时性能会更好,更好。
因此,您需要使用.on()
工作的新方式,因为它更有效。 如果你使用现在使用的相同forms,你必须对动态选择器进行稍微重新输入,或者你可以将地图作为第一个参数传递给.on()
和处理,这对你来说应该.on()
一个.on()
调用中的多个事件。 有关详细信息,请参阅.on()
的jQuery doc中的.on()
的第二种forms。
以下是使用.on()
进行动态行为的简单说明 。