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

Question

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

我传统上使用 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已加载并正在运行等。错误日志中没有错误。

我做错了什么？谢谢！

Answer 1

on 文档 指出（以粗体显示；））：

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

相当于 .live() 类似于

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

虽然将事件处理程序绑定到尽可能靠近元素（即层次结构中更接近的元素）会更好。

更新：在回答另一个问题时，我发现.live文档：

根据其后继者重写 .live() 方法非常简单；这些是对所有三种事件附加方法进行等效调用的模板：

$(选择器).live(事件、数据、处理程序); // jQuery 1.3+
$(document).delegate(选择器、事件、数据、处理程序); // jQuery 1.4.3+
$(document).on(事件、选择器、数据、处理程序); // 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;
        }
});

注意： 由于 this.selector 已被删除，上述函数在 jQuery v3 中将不起作用。

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

Answer 3

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

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

在 Visual Studio 中安装 jQuery Migrate NuGet 包，使所有版本控制问题消失。下次 Microsoft 更新其不显眼的 AJAX 和验证模块时，也许可以在不使用迁移脚本的情况下再次尝试，看看是否解决了问题。

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

Answer 4

除了所选答案之外，

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

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

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

Answer 5

jquery version 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)

示例图像视图