209

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

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

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

4

5 回答 5

252

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+
于 2011-11-05T16:20:01.693 回答
26

除了选择的答案，

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

于 2013-03-21T13:52:05.620 回答
7

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

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

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

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

于 2013-01-30T13:25:22.653 回答
4

除了选定的答案，

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

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

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

于 2014-02-11T17:48:56.500 回答
-1

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)

示例图像视图

于 2016-05-06T05:47:33.003 回答