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

Posted 2023-05-07

【中文标题】在 jQuery 中将 live() 变成 on()

【英文标题】：Turning live() into on() in jQuery

【发布时间】：2011-12-22 17:08:51

【问题描述】：

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

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

我做错了什么？谢谢！

【问题讨论】：

我知道这已经很晚了，但似乎 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 已消失的版本，则可能不需要立即对遗留代码进行更新。对于 new 代码，建议使用 on() 代替。我只是认为这些信息可能会在某个阶段对其他人有所帮助。

请参阅Migration Examples，了解如何将live 更改为on。

【参考方案1】：

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+

【讨论】：

@Jack：不用担心，IMO 这是个好问题。我认为其他人在尝试将所有bind、live 和delegate 调用转换为on 时也会遇到此问题。

啊，是的，当然，我们只有在从 .live > .on 运行一揽子查找和替换后才能看到这个答案

IMO，.on 语法更合乎逻辑，因为侦听器实际上附加到您提供的选择器。当事件被触发时，jQuery 遍历 DOM 并在指定的地方执行处理程序（简单的事件委托）。 .live 暗示发生了一些“神奇”的事情，据说为“未来元素”附加了事件处理程序，这并不完全正确。

@FelixKling 是正确的 - 我也偶然发现了这个！谢谢

对于搜索引擎：jQuery ".live()" 方法自 v1.7 起已弃用，并在 v1.9 中删除。改用“.on()”方法来修复你的脚本。令人惊讶的是，这也影响了当前的 Microsoft jquery.unobtrusive-ajax.js v2.0.20710.0（Microsoft 也没有更新他们的脚本，所以现在它已经坏了）。

【参考方案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

【参考方案3】：

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

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

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

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

【参考方案4】：

除了选定的答案，

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

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

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

【参考方案5】：

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 --> 第 7469 行 (jQuery.fn.extend)

Example images view