Mengubah hidup () menjadi on () di jQuery

202

Aplikasi saya telah menambahkan Dropdown secara dinamis. Pengguna dapat menambahkan sebanyak yang mereka butuhkan.

Secara tradisional saya menggunakan live()metode jQuery untuk mendeteksi kapan salah satu Dropdown ini diedit change():

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

Pada jQuery 1.7, saya telah memperbarui ini ke:

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

Melihat pada Documents, itu harusnya benar-benar valid (benar?) - tetapi event handler tidak pernah menyala. Tentu saja, saya sudah mengkonfirmasi jQuery 1.7 dimuat dan berjalan, dll. Tidak ada kesalahan dalam log kesalahan.

Apa yang saya lakukan salah? Terima kasih!

javascript jquery jquery-1.7

— Mendongkrak
sumber

2

Saya tahu ini terlambat tetapi tampaknya jQuery livesebenarnya menggunakan on, jadi menulis ulang kode warisan mungkin tidak diperlukan dulu sampai liveakan dihapus, yang saya percaya adalah 1.9. Kutipan dari sumber 1.7.1: live: function( types, data, fn ) {jQuery( this.context ).on( types, this.selector, data, fn ); return this;}Jadi, jika seseorang tidak memutakhirkan ke versi di mana livehilang pembaruan mungkin tidak diperlukan segera untuk kode warisan. Untuk kode baru tentunya menggunakan on()sebagai gantinya adalah seperti yang direkomendasikan. Saya hanya berpikir informasi ini dapat membantu orang lain pada tahap tertentu.

— Tidak

1

Lihat Contoh Migrasi tentang cara mengubah liveke on.

— Samuel Liew

246

Status ondokumentasi (dicetak tebal;)):

Penangan acara hanya terikat pada elemen yang dipilih saat ini; mereka harus ada di halaman pada saat kode Anda membuat panggilan ke .on().

Setara dengan .live()akan menjadi seperti

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

Meskipun lebih baik jika Anda mengikat event handler sedekat mungkin dengan elemen, yaitu elemen yang lebih dekat dalam hierarki.

Pembaruan: Saat menjawab pertanyaan lain, saya menemukan bahwa ini juga disebutkan dalam .livedokumentasi :

Menulis ulang .live()metode dalam hal penerusnya sangat mudah; ini adalah templat untuk panggilan yang setara untuk ketiga metode lampiran acara:
$(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+

— Felix Kling
sumber

5

@ Jack: Jangan khawatir, IMO itu pertanyaan yang bagus. Saya menganggap orang lain akan tersandung ini juga ketika mereka mencoba untuk mengkonversi semua bind, livedan delegatepanggilan ke on.

— Felix Kling

4

Ah ya, dan tentu saja kita hanya melihat jawaban ini setelah menjalankan blanket find dan replace from .live>.on

— ajbeaven

3

IMO, .onsintaks lebih logis, karena pendengar sebenarnya melekat pada pemilih yang Anda berikan. Ketika acara dipicu, jQuery melintasi DOM dan mengeksekusi handler yang ditentukan (delegasi acara sederhana). .livemenyarankan bahwa ada sesuatu "ajaib" yang terjadi, dan dikatakan untuk melampirkan penangan acara untuk "elemen masa depan" yang tidak sepenuhnya benar.

— David Hellsing

1

@ Feliksling itu benar - saya menemukan ini juga! Terima kasih

— willdanceforfun

2

Untuk mesin pencari: Metode jQuery ".live ()" disusutkan sejak v1.7 dan dihapus di v1.9. Perbaiki skrip Anda dengan menggunakan metode ".on ()". Anehnya ini juga mempengaruhi Microsoft jquery.unobtrusive-ajax.js v2.0.20710.0 saat ini (Microsoft tidak memperbarui skrip mereka sehingga sekarang rusak).

— Tony Wall

25

Selain jawaban yang dipilih,

Port jQuery.liveke jQuery 1.9+ sambil menunggu aplikasi Anda dimigrasi. Tambahkan ini ke file JavaScript Anda.

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

Catatan: Fungsi di atas tidak akan berfungsi dari jQuery v3 seperti this.selectoryang dihapus.

Atau, Anda dapat menggunakan https://github.com/jquery/jquery-migrate

— Vikrant Chaudhary
sumber

7

Baru saja menemukan solusi yang lebih baik yang tidak melibatkan pengeditan kode pihak ketiga:

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

Instal paket jQuery Migrate NuGet di Visual Studio untuk menyelesaikan semua masalah pembuatan versi. Lain kali Microsoft memperbarui AJAX yang tidak mencolok dan modul validasi mereka mungkin mencobanya tanpa skrip migrasi lagi untuk melihat apakah mereka menyelesaikan masalah.

Karena jQuery Migrate dikelola oleh jQuery Foundation, saya pikir ini bukan hanya pendekatan terbaik untuk perpustakaan pihak ketiga dan juga untuk mendapatkan pesan peringatan untuk perpustakaan Anda sendiri yang merinci cara memperbaruinya.

— Tony Wall
sumber

3

Selain jawaban yang dipilih,

Jika Anda menggunakan Visual Studio , Anda dapat menggunakan Regex Replace .
Di Edit> Temukan dan Ganti> Ganti di File
Atau Ctrl + Shift + H

Di pop-up Temukan dan Ganti, setel bidang ini

Temukan apa: \$$(.*)$\.live\((.*),
Ganti dengan: $(document.body).on($2,$1,
Dalam opsi temukan centang "Gunakan Ekspresi Reguler"

— Maykol Rypka
sumber

-1

jquery verision xxxjs buka editor, temukan jQuery.fn.extend

tambahkan kode

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

Contoh: jquery-2.1.1.js -> line 7469 (jQuery.fn.extend)

Contoh tampilan gambar

— Uğur Tosun
sumber