jQuery中的live()转换为on()

我的应用程序动态添加了下拉列表。用户可以添加任何他们需要的数量。

我传统上使用jQuery的live()方法来检测这些下拉列表中的一个是change()ed:

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

我做错了什么?谢谢!

73495 次浏览
小开
最佳答案

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+
小开

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

< a href = " https://github.com/jquery/jquery-migrate/ readme " > https://github.com/jquery/jquery-migrate/ readme < / >

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

由于jQuery Migrate是由jQuery基金会维护的，我认为这不仅是第三方库的最佳方法，而且还可以为您自己的库获取详细的更新方法的警告消息。

小开

除了选定的答案，

在等待应用程序迁移时，将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;
}
});

由于this.selector被移除，上述函数将无法在jQuery v3中工作。

或者，你可以使用https://github.com/jquery/jquery-migrate

小开

除了所选的答案外，

如果你使用Visual Studio，你可以使用正则表达式替换。
在“Edit > Find and Replace > Replace In Files
. 或Ctrl + Shift + H

在“Find and Replace”弹出框中，将这些字段设置为

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

小开

jquery版本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——> line 7469 (jQuery.fn.extend)

图片示例视图 .


提交答案