在jQuery中将live()变成on()


202

我的应用程序已动态添加了下拉列表。用户可以根据需要添加任意数量。

传统上,我使用jQuery的live()方法来检测何时change()编辑以下Dropdowns之一:

$('select[name^="income_type_"]').live('change', function() {
    alert($(this).val());
});

从jQuery 1.7开始,我已经将其更新为:

$('select[name^="income_type_"]').on('change', function() {
    alert($(this).val());
});

查看文档,这应该是完全有效的(对吗?)-但是事件处理程序永远不会触发。当然,我已经确认jQuery 1.7已加载并正在运行,等等。错误日志中没有错误。

我究竟做错了什么?谢谢!


2
我知道这已经很晚了,但无论如何看来jQuery live确实正在使用on,因此可能直到现在live将其删除之前才需要重新编写旧代码,我相信这是1.9。摘自1.7.1来源:live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn ); return this;}因此,如果不升级到不再使用的版本,live则可能不需要立即为旧代码进行更新。对于代码on(),建议您改用。我只是认为这些信息可能会在某个阶段帮助其他人。
Nope 2012年

1
有关如何更改为的信息,请参见迁移示例liveon
塞缪尔·柳

Answers:


246

on文档的状态(粗体)):

事件处理程序仅绑定到当前选定的元素;在您的代码调用时,它们必须存在于页面上.on()

等效于.live()类似

$(document.body).on('change', 'select[name^="income_type_"]', function() {
    alert($(this).val());
});

虽然最好将事件处理程序绑定到尽可能靠近元素的位置,即绑定到层次结构中更靠近元素的位置更好。

更新:在回答另一个问题时,我发现.live文档中也提到了这一点:

.live()就其后继者而言,重写该方法非常简单。这些是用于所有三个事件附件方法的等效调用的模板:

$(selector).live(events, data, handler);                // jQuery 1.3+
$(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+
$(document).on(events, selector, data, handler);        // jQuery 1.7+

5
@杰克:不用担心,海事组织这是一个好问题。我相信其他人会绊倒这个问题,以及当他们尝试转换所有bindlivedelegate以电话on
Felix Kling

4
嗯,是的,当然,我们只有在进行广泛的查找并替换为.live> 之后,才会看到此答案.on
ajbeaven 2011年

3
IMO,.on语法更加合乎逻辑,因为侦听器实际上已附加到您提供的选择器上。触发事件后,jQuery将遍历DOM并在指定的地方执行处理程序(简单事件委托)。.live提示发生了一些“魔术”事件,并且据说为“未来元素”附加了事件处理程序,但这并不完全正确。
David Hellsing

1
@FelixKling是正确的-我也偶然发现了这个!谢谢
willdanceforfun 2012-4-5

2
对于搜索引擎:jQuery“ .live()”方法自v1.7起已弃用,并已从v1.9中删除。通过使用“ .on()”方法来修复脚本。令人惊讶的是,这也影响了当前的Microsoft jquery.unobtrusive-ajax.js v2.0.20710.0(Microsoft也不更新其脚本,因此现在它已损坏)。
Tony Wall

25

除了选择的答案之外,

端口jQuery.live将jQuery 1.9+,而你等待你的应用程序迁移。将此添加到您的JavaScript文件。

// Borrowed from jQuery 1.8.3's source code
jQuery.fn.extend({
  live: function( types, data, fn ) {
          if( window.console && console.warn ) {
           console.warn( "jQuery.live is deprecated. Use jQuery.on instead." );
          }

          jQuery( this.context ).on( types, this.selector, data, fn );
          return this;
        }
});

注意:以上功能已从jQuery v3 this.selector中移除,因此无法使用。

或者,您可以使用https://github.com/jquery/jquery-migrate


7

刚刚找到了一个更好的解决方案,它不需要编辑第三方代码:

https://github.com/jquery/jquery-migrate/#readme

在Visual Studio中安装jQuery Migrate NuGet软件包,以消除所有版本控制问题。下次Microsoft下一次更新其兼容的AJAX和验证模块时,可能会在没有迁移脚本的情况下再次尝试它,以查看它们是否解决了该问题。

由于jQuery Migrate由jQuery Foundation维护,所以我认为这不仅是第三方库的最佳方法,而且对于您自己的库获取警告消息,详细说明如何更新它们。


3

除了选择的答案之外,

如果使用Visual Studio,则可以使用Regex Replace
在“编辑”>“查找和替换”>“在文件中替换”
或Ctrl + Shift + H

在“查找和替换”弹出窗口中,设置以下字段

查找内容: \$\((.*)\)\.live\((.*),
替换为: $(document.body).on($2,$1,
在查找选项中,选中“使用正则表达式”


-1

jQuery verision xxxjs打开编辑器,找到 jQuery.fn.extend

添加代码

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

示例:jquery-2.1.1.js->第7469行(jQuery.fn.extend)

示例图片视图

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.