我最近将jQuery从1.8升级到2.1。我突然发现.live()
停止了工作
我收到错误TypeError: $(...).live is not a function
。
我可以用任何方法代替.live()
吗?
答案 0 :(得分:476)
.live()
已在1.9版本中删除。 这意味着如果您要从1.8及更早版本升级,如果您不遵循以下迁移指南,您会发现事情已经破裂。您不能简单地将.live()
替换为.on()
!
对于实际网站上的快速/热修复,不只需将关键字live
替换为on
,作为参数不同!
.live(events, function)
应该映射到:
.on(eventType, selector, function)
(子)选择器非常重要!如果您因任何原因无需使用此功能,请将其设置为null
。
之前:
$('#mainmenu a').live('click', function)
之后,将子元素(a
)移动到.on()
选择器:
$('#mainmenu').on('click', 'a', function)
之前:
$('.myButton').live('click', function)
之后,将元素(.myButton
)移动到.on()
选择器,找到最近的父元素(最好带有ID):
$('#parentElement').on('click', '.myButton', function)
如果您不知道将哪些内容作为父级,body
始终有效:
$('body').on('click', '.myButton', function)
答案 1 :(得分:48)
您可以通过添加以下JavaScript代码来避免重构代码
jQuery.fn.extend({
live: function (event, callback) {
if (this.selector) {
jQuery(document).on(event, this.selector, callback);
}
return this;
}
});
答案 2 :(得分:14)
jQuery API文档将live()
列为1.7版本已弃用,并从版本1.9开始删除:link。
不推荐使用版本:1.7,已删除:1.9
此外,它指出:
从jQuery 1.7开始,不推荐使用.live()方法。使用.on()附加事件处理程序。旧版jQuery的用户应优先使用.delegate() .live()
答案 3 :(得分:14)
jQuery的.live()
转发端口> = 1.9
避免在.live()
上重构JS依赖项
使用优化的DOM选择器上下文
/**
* Forward port jQuery.live()
* Wrapper for newer jQuery.on()
* Uses optimized selector context
* Only add if live() not already existing.
*/
if (typeof jQuery.fn.live == 'undefined' || !(jQuery.isFunction(jQuery.fn.live))) {
jQuery.fn.extend({
live: function (event, callback) {
if (this.selector) {
jQuery(document).on(event, this.selector, callback);
}
}
});
}
答案 4 :(得分:5)
.live已在1.9中删除,请参阅升级指南:http://jquery.com/upgrade-guide/1.9/#live-removed
答案 5 :(得分:5)
一个非常简单的修复,不需要更改代码,只需添加jquery迁移脚本,在此处下载 https://github.com/jquery/jquery-migrate/
它提供了jquery弃用但需要的功能,如" live"," browser"等
答案 6 :(得分:4)
.live()已被弃用,现已从jQuery 1.9中删除 您应该使用.on()
答案 7 :(得分:2)
如果没有必要,我倾向于不使用.on()语法。例如,您可以更容易地迁移:
旧:
$('.myButton').live('click', function);
新:
$('.myButton').click(function)
以下是有效事件处理程序的列表:https://api.jquery.com/category/forms/
答案 8 :(得分:1)
如果您碰巧使用Ruby on Rails的jQuery gem <a href="#" class="nostyle">
<p class="heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi convallis magna sit amet sollicitudin posuere. Vestibulum justo ex, lacinia dictum mollis et, egestas eu ipsum. Aliquam posuere purus vitae justo mollis lobortis vel vitae sapien.
Sed sapien nibh, tincidunt sed risus vel, vestibulum euismod augue. Quisque molestie vehicula magna, eget pulvinar augue pellentesque nec. Praesent venenatis risus placerat dapibus rhoncus. Aliquam lacinia, dolor non tristique congue, est nunc bibendum
erat, id varius augue turpis id ipsum.
</p>
</a>
并且由于某种原因您无法重构遗留代码,那么仍然支持的最后一个版本是jquery-rails
并且您可以锁定通过在2.1.3
上使用以下语法:
Gemfile
然后您可以使用以下命令进行更新:
gem 'jquery-rails', '~> 2.1', '= 2.1.3'
我希望帮助其他人面对类似的问题。
答案 9 :(得分:0)
当我在网站上收到此错误时,它将停止某些功能 在我的网站上,经过研究后,我找到了解决该问题的方法,
$colorpicker_inputs.live('focus', function(e) {
jQuery(this).next('.farb-popup').show();
jQuery(this).parents('li').css( {
position : 'relative',
zIndex : '9999'
})
jQuery('#tabber').css( {
overflow : 'visible'
});
});
$colorpicker_inputs.live('blur', function(e) {
jQuery(this).next('.farb-popup').hide();
jQuery(this).parents('li').css( {
zIndex : '0'
})
});
应将下面的“ 实时”替换为“ 启用”
$colorpicker_inputs.on('focus', function(e) {
jQuery(this).next('.farb-popup').show();
jQuery(this).parents('li').css( {
position : 'relative',
zIndex : '9999'
})
jQuery('#tabber').css( {
overflow : 'visible'
});
});
$colorpicker_inputs.on('blur', function(e) {
jQuery(this).next('.farb-popup').hide();
jQuery(this).parents('li').css( {
zIndex : '0'
})
});
下面是另一个基本示例:
.live(event, selector, function)
将其更改为:
.on(event, selector, function)