JQuery'de live () öğesini on () haline getirme

Uygulamam, Dinamik Olarak Açılır Listeler ekledi. Kullanıcı istediği kadarını ekleyebilir.

Geleneksel live()olarak bu Dropdowns biri change()ed zaman tespit etmek için jQuery yöntemini kullanıyordum :

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

JQuery 1.7 itibariyle, bunu şu şekilde güncelledim:

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

Dokümanlar'a bakıldığında, bu tamamen geçerli olmalıdır (değil mi?) - ancak olay işleyicisi hiçbir zaman tetiklenmez. Tabii ki, jQuery 1.7 yüklü ve çalışıyor, vb doğruladım. Hata günlüğünde hata yok.

Neyi yanlış yapıyorum? Teşekkürler!

onDokümantasyon (kalın;) devletler):

Olay işleyicileri yalnızca seçili öğelere bağlıdır; kodunuzun çağrıldığı sırada sayfada bulunmaları gerekir .on().

Eşdeğer için .live()gibi bir şey olurdu

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

Olay işleyicisini öğelere, yani hiyerarşide daha yakın olan bir öğeye mümkün olduğunca yakın bağlamanız daha iyi olsa da.

Güncelleme: Başka bir soruya cevap verirken, bunun .livedokümanlarda da belirtildiğini öğrendim :

.live()Yöntemin halefleri açısından yeniden yazılması basittir; bunlar, üç olay ekleme yönteminin tümü için eşdeğer aramalara yönelik şablonlardır:

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

Seçilen cevaba ek olarak,

Liman jQuery.live jQuery 1.9+ Sizin taşınamayacak kadar uygulamanız için beklerken. Bunu JavaScript dosyanıza ekleyin.

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

Not: Yukarıdaki işlev this.selectorkaldırıldığı gibi jQuery v3'ten çalışmaz .

Veya https://github.com/jquery/jquery-migrate kullanabilirsiniz

Üçüncü taraf kodunu düzenlemeyi içermeyen daha iyi bir çözüm buldum:

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

Tüm sürüm oluşturma sorunlarını ortadan kaldırmak için jQuery Migrate NuGet paketini Visual Studio'ya yükleyin. Bir dahaki sefere Microsoft mütevazi AJAX ve doğrulama modüllerini güncellediklerinde, sorunu çözüp çözmediklerini görmek için geçiş betiği olmadan tekrar deneyin.

JQuery Migrate, jQuery Foundation tarafından sürdürüldüğünden, bunun yalnızca üçüncü taraf kütüphaneleri için en iyi yaklaşım olmadığını ve aynı zamanda kendi kütüphaneleriniz için nasıl güncelleneceğini açıklayan uyarı mesajları almayı düşünüyorum.

Seçilen cevaplara ek olarak,

Eğer kullanırsanız , Visual Studio , kullanabileceğiniz Regex değiştirin .
Düzen> Bul ve Değiştir> Dosyalarda Değiştir
veya Ctrl + Shift + H

Bul ve Değiştir açılır penceresinde bu alanları ayarlayın

\$\((.*)\)\.live\((.*),
Şunu bul: Şununla değiştir:$(document.body).on($2,$1,
Seçeneklerde "Düzenli İfadeleri Kullan" seçeneğini işaretleyin

jquery sürüm xxxjs açık editör, bulmak jQuery.fn.extend

kod ekle

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

Örnek: jquery-2.1.1.js -> satır 7469 (jQuery.fn.extend)

Örnek görüntüler görünümü