Biến live () thành on () trong jQuery

Ứng dụng của tôi đã tự động thêm Dropdowns. Người dùng có thể thêm bao nhiêu tùy ý.

Theo truyền thống, tôi đã sử dụng live()phương thức của jQuery để phát hiện khi một trong những Dropdown này được chỉnh sửa change():

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

Kể từ jQuery 1.7, tôi đã cập nhật điều này thành:

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

Nhìn vào Tài liệu, điều đó sẽ hoàn toàn hợp lệ (phải không?) - nhưng trình xử lý sự kiện không bao giờ kích hoạt. Tất nhiên, tôi đã xác nhận jQuery 1.7 đã được tải và đang chạy, v.v. Không có lỗi trong nhật ký lỗi.

Tôi đang làm gì sai? Cảm ơn!

Các ontài liệu nêu (in đậm;)):

Trình xử lý sự kiện chỉ bị ràng buộc với các yếu tố hiện được chọn; chúng phải tồn tại trên trang tại thời điểm mã của bạn thực hiện cuộc gọi đến .on().

Tương đương .live()sẽ là một cái gì đó như

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

Mặc dù sẽ tốt hơn nếu bạn liên kết trình xử lý sự kiện càng gần càng tốt với các phần tử, nghĩa là, với một phần tử gần hơn trong cấu trúc phân cấp.

Cập nhật: Trong khi trả lời một câu hỏi khác, tôi phát hiện ra rằng điều này cũng được đề cập trong .livetài liệu :

Viết lại .live()phương pháp theo cách kế của nó là đơn giản; đây là các mẫu cho các cuộc gọi tương đương cho cả ba phương thức đính kèm sự kiện:

$(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+

Ngoài câu trả lời đã chọn,

Chuyển jQuery.livesang jQuery 1.9+ trong khi bạn chờ ứng dụng của mình di chuyển. Thêm phần này vào tệp JavaScript của bạn.

// 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;
        }
});

Lưu ý: Hàm trên sẽ không hoạt động từ jQuery v3 khi this.selectorbị xóa.

Hoặc, bạn có thể sử dụng https://github.com/jquery/jquery-migrate

Chỉ cần tìm một giải pháp tốt hơn không liên quan đến việc chỉnh sửa mã của bên thứ ba:

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

Cài đặt gói jQuery Migrate NuGet trong Visual Studio để làm cho tất cả các vấn đề về phiên bản biến mất. Lần tới, Microsoft cập nhật các mô-đun AJAX và xác thực không phô trương của họ có thể thử lại mà không cần tập lệnh di chuyển để xem họ có giải quyết được vấn đề không.

Vì jQuery Migrate được duy trì bởi jQuery Foundation, tôi nghĩ rằng đây không chỉ là cách tiếp cận tốt nhất cho các thư viện bên thứ ba và còn để nhận các thông báo cảnh báo cho các thư viện của riêng bạn chi tiết cách cập nhật chúng.

Ngoài các câu trả lời đã chọn,

Nếu bạn sử dụng Visual Studio , bạn có thể sử dụng Regex Thay thế .
Trong Chỉnh sửa> Tìm và Thay thế> Thay thế trong Tệp
Hoặc Ctrl + Shift + H

Trong Tìm và Thay thế cửa sổ bật lên, hãy đặt các trường này

Tìm gì: \$\((.*)\)\.live\((.*),
Thay thế bằng: $(document.body).on($2,$1,
Trong tùy chọn tìm, hãy kiểm tra "Sử dụng biểu thức chính quy"

jquery verision xxxjs biên tập mở, tìm jQuery.fn.extend

thêm mã

live: function( types, data, fn ) {
        jQuery( this.context ).on( types, this.selector, data, fn );
        return this;
    },

Ví dụ: jquery-2.1.1.js -> dòng 7469 (jQuery.fn.extend)

Xem hình ảnh ví dụ