JQuery .live () ve .on () arasındaki fark nedir

.on()JQuery 1.7'de .live()önceki sürümlerin yerini alan yeni bir yöntem olduğunu görüyorum .

Aralarındaki farkı ve bu yeni yöntemi kullanmanın faydalarını öğrenmekle ilgileniyorum.

Canlı yayını neden kullanmak istemediğiniz belgelerde oldukça açık . Ayrıca Felix'in bahsettiği gibi, .onolayları bağlamanın daha akıcı bir yoludur.

JQuery'nin sonraki sürümleri dezavantajları olmayan daha iyi yöntemler sunduğundan .live () yönteminin kullanılması artık önerilmemektedir. Özellikle, .live () kullanımıyla aşağıdaki sorunlar ortaya çıkar:

• jQuery, .live()yöntemi çağırmadan önce seçici tarafından belirtilen öğeleri almaya çalışır ; bu, büyük belgelerde zaman alıcı olabilir.
• Zincirleme yöntemleri desteklenmez. Örneğin, $("a").find(".offsite, .external").live( ... ); bir değil geçerli ve beklendiği gibi çalışmıyor.
• Tüm .live()olaylar documentöğeye eklendiğinden , olaylar işlenmeden önce olası en uzun ve en yavaş yolu alır.
• event.stopPropagation() Olay işleyicisinde arama , belgede daha aşağıda eklenmiş olay işleyicilerini durdurmada etkisizdir; olay zaten öğesine yayıldı document.
• .live()Örneğin şaşırtıcı olabilir yollarla, diğer olay yöntemlerle yöntem etkileşimde bulunduğunda, $(document).unbind("click")herhangi bir çağrıyla bağlı tüm tıklama işleyicileri kaldırır .live()!

İnsanların bir noktadan .live()diğerine geçerken karşılaştıkları bir fark, olayları DOM'a dinamik olarak eklenen öğelere bağlarken .on()parametrelerinin .on()biraz farklı olmasıdır.

.live()Yöntemle kullandığımız söz diziminin bir örneğini burada bulabilirsiniz :

$('button').live('click', doSomething);

function doSomething() {
    // do something
}

Şimdi .live()jQuery sürüm 1.7'de kullanımdan kaldırılan ve sürüm 1.9'da kaldırılan .on()yöntemi kullanmalısınız . .on()Yöntemi kullanan eşdeğer bir örnek :

$(document).on('click', 'button', doSomething);

function doSomething() {
    // do something
}

Lütfen .on()düğmenin kendisi yerine belgeye karşı aradığımızı unutmayın . Olaylarını dinlediğimiz elemanın seçicisini ikinci parametrede belirtiyoruz.

Yukarıdaki örnekte .on(), belgeyi arıyorum , ancak seçicinize daha yakın bir öğe kullanırsanız daha iyi performans elde edersiniz. Herhangi bir üst öğe, siz çağırmadan önce sayfada olduğu sürece çalışacaktır .on().

Bu, burada belgelerde açıklanmıştır , ancak gözden kaçırılması oldukça kolaydır.

Resmi Blogu görün

[..] Yeni .on () ve .off () API'leri, jQuery'deki bir belgeye olay eklemenin tüm yollarını birleştirir ve yazmaları daha kısadır! [...]

.live()

Bu yöntem, şimdi ve gelecekte geçerli seçiciyle eşleşen tüm öğeler için bir olay işleyicisi eklemek için kullanılır.

$( "#someid" ).live( "click", function() {
  console.log("live event.");
});

ve

.on()

Bu yöntem, aşağıdaki örnekte, seçilen öğelere bir veya daha fazla olay için bir olay işleyici işlevi eklemek için kullanılır.

$( "#someid" ).on( "click", function() {
  console.log("on event.");
});

Canlı ve canlı arasındaki fark hakkında iyi eğitim

Yukarıdaki bağlantıdan alıntı yapın

.Live () ile ilgili sorun nedir

JQuery'nin sonraki sürümleri dezavantajları olmayan daha iyi yöntemler sunduğundan .live () yönteminin kullanılması artık önerilmemektedir. Özellikle, .live () kullanımıyla aşağıdaki sorunlar ortaya çıkar:

1. jQuery, büyük belgelerde zaman alıcı olabilen .live () yöntemini çağırmadan önce seçici tarafından belirtilen öğeleri almaya çalışır.
2. Zincirleme yöntemleri desteklenmez. Örneğin, $ ("a"). Find (". Offsite, .external"). Live (…); geçerli değil ve beklendiği gibi çalışmıyor.
3. Tüm .live () olayları belge öğesine eklendiğinden, olaylar işlenmeden önce olası en uzun ve en yavaş yolu alır.
4. Olay işleyicisindeki event.stopPropagation () işlevinin çağrılması, belgenin alt kısımlarına eklenmiş olay işleyicilerini durdurmada etkisizdir; olay zaten belgelere yayıldı.
5. .Live () yöntemi, şaşırtıcı olabilecek şekillerde diğer olay yöntemleriyle etkileşim kurar, örneğin, $ (document) .unbind ("click"), herhangi bir .live () çağrısıyla eklenen tüm tıklama işleyicilerini kaldırır!

daha fazla bilgi için kontrol edin .. .live () ve .on ()

.live () yöntemi, dinamik nesil içerikle uğraşırken kullanılır ... bir Jquery Slider'ın değerini değiştirdiğimde bir sekme ekleyen programda oluşturduğum ve her sekmeye kapat düğmesi işlevini eklemek istediğim gibi üretecek olan ... denediğim kod ..

var tabs = $('#tabs').tabs();
                                        // live() methos attaches an event handler for all
                                        //elements which matches the curren selector
        $( "#tabs span.ui-icon-close" ).live( "click", function() {


            // fetches the panelId attribute aria-control which is like tab1 or vice versa
            var panelId = $( this  ).closest( "li" ).remove().attr( "aria-controls" );
            $( "#" + panelId ).remove();
            tabs.tabs( "refresh" );
        });

ve çok güzel çalışıyor ...

JQuery kullanan ve kullanılan bir Chrome uzantısı olan "Comment Save" adlı Chrome uzantısının yazarıyım .live(). Uzantının çalışma şekli, kullanan tüm metin alanlarına bir dinleyici eklemektir. live()- bu iyi çalıştı çünkü belge her değiştiğinde dinleyiciyi tüm yeni metin alanlarına ekleyecekti.

Taşındım .on()ama işe yaramıyor. Belge her değiştiğinde dinleyiciyi eklemiyor - bu yüzden kullanmaya geri döndüm .live(). Bu sanırım bir hata .on(). Sadece dikkatli ol sanırım.

Tarayıcı kapalı olayını tanımlamam gerekiyor. Araştırma yaptıktan sonra jQuery 1.8.3 kullanarak aşağıdakileri yapıyorum

1. Köprü tıklandığında aşağıdaki jQuery'yi kullanarak bir bayrağı AÇIN

   $ ['a']. canlı ('tıklama', function () {cleanSession = false;});

2. Herhangi bir giriş düğmesi türü gönderime tıklandığında aşağıdaki jQuery'yi kullanarak bir bayrağı AÇIN

$ ("input [tür = gönder]"). canlı ('tıklama', işlev () {alert ('giriş düğmesi tıklandı'); cleanSession = false;});

1. Form gönderimi herhangi bir zamanda gerçekleştiğinde aşağıdaki jQuery'yi kullanarak bir bayrağı AÇIN

$ ['form']. canlı ('gönder', işlev () {cleanSession = false;});

Şimdi önemli olan şey ... benim çözümüm sadece .on yerine .live kullanırsam işe yarıyor. .On kullanırsam, form gönderildikten sonra olay tetikleniyor ve bu çok geç. Çoğu zaman formlarım javascript çağrısı (document.form.submit) kullanılarak gönderiliyor

Yani .live ve .on arasında temel bir fark vardır. .Live kullanırsanız etkinlikleriniz hemen tetiklenir, ancak .on'a geçerseniz zamanında tetiklenmez