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

Question

我的应用程序动态添加了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());
});

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

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

Answer 1

该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+

Answer 2

除了选定的答案,

端口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

Answer 3

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

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

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

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