在jQuery中将live()转换为on()

时间:2011-11-05 16:16:03

标签: javascript jquery jquery-1.7

我的应用程序动态添加了Dropdown。用户可以根据需要添加任意数量的内容。

我传统上使用jQuery的live()方法检测其中一个下拉列表是change()编辑的:

$('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已加载并正在运行等。错误日志中没有错误。

我做错了什么?谢谢!

5 个答案:

答案 0 :(得分:240)

on documentation个州(粗体;)):

  

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

等同于.live()就像是

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

尽管将事件处理程序尽可能地绑定到元素(即,更接近层次结构中的元素)会更好。

更新:在回答其他问题时,我发现.live documentation中也提到了这一点:

  

根据其后继方法重写.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+

答案 1 :(得分: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

答案 2 :(得分:7)

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

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

在Visual Studio中安装jQuery Migrate NuGet包以使所有版本控制问题消失。下次微软更新他们不引人注目的AJAX和验证模块时,可以尝试不再使用迁移脚本来查看他们是否解决了这个问题。

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

答案 3 :(得分:3)

除了选定的答案外,

如果您使用 Visual Studio ,则可以使用正则表达式替换
在编辑>查找和替换>替换文件
或者按Ctrl + Shift + H

在“查找和替换”弹出窗口中,将这些字段设置为

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

答案 4 :(得分:-1)

jquery verision x.x.x.js打开编辑器,找到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)

Example images view