.live()

.live( events, handler ) Dönen Değer : jQuery Nesnesi
Açıklama : Verilen seçiciyle şimdi mevcut olan ve ileride de eklenecek olan tüm elemanlara bir olay işleyici bağlar.

.live( events, handler )
events
Tip : String
JavaScript olay tipini içeren bir string, "click" veya "keydown" gibi. Versiyon 1.4 itibarıyla boşlukla ayrılmış birden çok olay tipi veya kullanıcı tanımlı olay isimlerini de kabul etmeye başladı.
handler
Tip : Fonksiyon( Olay eventObject )
Olay her tetiklendiğinde çalıştırılacak olan fonksiyon.
.live( events [, data ], handler )
events
Tip : String
JavaScript olay tipini içeren bir string, "click" veya "keydown" gibi. Versiyon 1.4 itibarıyla boşlukla ayrılmış birden çok olay tipi veya kullanıcı tanımlı olay isimlerini de kabul etmeye başladı.
data
Tip : Düz Nesne
Olay işleyiciye gönderilecek verileri içeren bir nesne.
handler
Tip : Fonksiyon( Olay eventObject )
Olay her tetiklendiğinde çalıştırılacak olan fonksiyon.
.live( events )
events
Tip : Düz Nesne
Bir ya da daha fazla JavaScript olay tipini ve onlara karşılık olay işleyici fonksiyonları içeren bir nesne.

Not : Bu API JQuery v1.9'da kaldırıldı, yerine .on() metodu kullanınız.

Bu metod sayfa içeriğinde dinamik olarak değişimler olduğunda olay işleyicilerin kullanımını kolaylaştıran şekilde document elemanında delegasyon tipi olay işleyici eklemeye yarar. Direk ve delegasyon yoluyla olay tanımları için .on() metoduna bakınız.

.live() metodunu tekrar düzenlemeler ile nasıl dönüştüğü şöyle sıralanı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+

Parametre events olay isimlerinden veya namespace değerlerinden oluşabileceği gibi olay adı stringi ve olay işleyici fonksiyonlardan oluşan bir nesne de olabilir. Parametre data istenirse kullanılmayabilir. Örneğin aşağıdaki 3 metod çağrısı fonksiyonel olarak eşittir.

$( "a.offsite" ).live( "click", function() {
  alert( "Goodbye!" ); // jQuery 1.3+
});
$( document ).delegate( "a.offsite", "click", function() {
  alert( "Goodbye!" ); // jQuery 1.4.3+
});
$( document ).on( "click", "a.offsite", function() {
  alert( "Goodbye!" );  // jQuery 1.7+
});

JQuery yeni versiyonlarında dezavantajları olmayan daha iyi metodlar olduğundan .live() metodu kullanımı tavsiye edilmez. Aşağıda .live() kullanımının sebep olduğu sorunlar sıralanıyor.


  • .live() metodunu çağırmadan önceki jQuery seçicisi tarafından getirilen elemanlar büyük dökümanlarda zaman sorunu üretebilir.
  • Zincirleme metod imkanı desteklenmez. Mesela
    $( "a" ).find( ".offsite, .external" ).live( ... ); geçerli değildir ve beklendiği gibi çalışmaz.
  • Tüm .live() olayları document nesnesine bağlandığı için olaylar işlenmeden önce en uzun ve meşakkatli yoldan geçerler.
  • Mobil iOS'da (iPhone, iPad ve iPod Touch) click olayı birçok eleman tarafından document body'ye aktarılmadığından aşağıdakilerden birini çalışmadan .live() metodu kullanılamaz.
    1. a ya da button gibi doğal olarak tıklanan elemanlar kullanın. Bu ikisi de olayı üstü olan document'e aktarır.
    2. document.body altındaki elemanlar için .on() ve .delegate() kullanın.
    3. click olayını üst elemana aktarmasını istediğiniz elemana cursor: pointer; CSS stili verin. Ama bu durumda elemanda kopyala-yapıştır imkanının olamayacağını ve dokunulunca elemanın parlak olacağını unutmayın.
  • Döküman altındaki elemanlara tanımlanmış olay işleyicilerde event.stopPropagation() olayın yayılmasını önlemekte işe yaramaz, çünkü kod oraya geldiğinde olay zaten document'e kadar yayılmıştır.
  • .live() metodunun diğer olay metodlarıyla etkileşimi bazen ilginç olabilir. Örneğin $( document ).off( "click" ) komutu .live() ile tanımlanan tüm click olaylarını iptal eder.

Hala .live() kullanan siteler için bu versiyona göre listesi faydalı olabilir.

  • JQuery 1.7 öncesinde .live() ile bağlanan olay işleyicilerin daha yukarı yayılmasını önlemek için olay işleyiciden false değeri dönülür. .stopPropagation() metodu bunlarda işe yaramaz.
  • Versiyon 1.4 ile .live() metodu yayılan tüm JavaScript olayları gibi kullanıcı tanımlı olayları da destekler. Ayrıca yayılmayan change, submit, focus ve blur gibi olayları da destekler.
  • Versiyon 1.3.x 'te sadece şu JavaScript olayları bağlanabilir: click, dblclick, keydown, keypress, keyup, mousedown, mousemove, mouseout, mouseover, ve mouseup.


Örnekler:

Bir olayı iptal et ve yukarı yayılmasına da false değeri dönerek engel ol.

$( "a" ).live( "click", function() {
  return false;
});

Sadece default aksiyonu preventDefault fonksiyonu kullanarak iptal et.

$( "a" ).live( "click", function( event ) {
  event.preventDefault();
});

.live() ile kullanıcı tanımlı olay tanımla.

$( "p" ).live( "myCustomEvent", function( event, myName, myValue ) {
  $( this ).text( "Hi there!" );
  $( "span" )
    .stop()
    .css( "opacity", 1 )
    .text( "myName = " + myName )
    .fadeIn( 30 )
    .fadeOut( 1000 );
  });
$( "button" ).on( "click", function() {
  $( "p" ).trigger( "myCustomEvent" );
});

Bir nesne ile birçok olay ve olay işleyici tanımla. Not: .live() sayesinde belgede bulunan ve sonradan eklenecek tüm paragraflara click, mouseover ve mouseout olay işleyicileri ekleniyor.

$( "p" ).live({
  click: function() {
    $( this ).after( "<p>Another paragraph!</p>" );
  },
  mouseover: function() {
    $( this ).addClass( "over" );
  },
  mouseout: function() {
    $( this ).removeClass( "over" );
  }
});

.

.