在 jQuery 中将 live（）转换为 on（）

javascript jquery jquery-1.7

2022-08-30 01:14:36

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

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

我做错了什么？谢谢！

答案 1

文档上写着（粗体;)）：

事件处理程序仅绑定到当前选定的元素;在代码调用时，它们必须存在于页面上。.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+

答案 2

除了选定的答案，

在等待应用程序迁移时移植到 jQuery 1.9+。将其添加到您的 JavaScript 文件中。jQuery.live

// 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

在 jQuery 中将 live（） 转换为 on（）

在 jQuery 中将 live（）转换为 on（）