“Pratik, iyi bir noktaya geldikten sonra yaptığımız bir şey değildir. Sizi iyi bir noktaya getirmesi için yaptığımız bir şeydir.”
by Malcolm Gladwell Outliers S. 36

jQuery de live() Kullanımı

Tarih: Mart 10th, 2010 | Yazar: | Kategoriler: Javascript, jQuery | Etiketler: , | 5 Yorum »

jQuery daha doğrusu JavaScript ile az çok uğraştıysanız eğer, bir sorunu fark etmişsinizdir. Sayfa ilk yüklendikten sonra eklenen elementleri daha önce eklediğimiz eventler(click, hover…)  tanımaz, tanıması için bu eventleri tekrar çalıştırmamız gerekir. Örnek ile göstermek gerekirse bu durumu.

$(document).ready(function(){
$('p').click(function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi tıklama ile eklediğimiz paragraflara(p) tıkladığımız zaman hiçbir tepki vermiyor oysa sayfamıza ilk yüklenen paragraf(p) den hiçbir farkı yok. Bu sorunu aşmak için eklediğimiz event’i tekrar çalıştırmamız gerekiyordu daha önceden.
jQuery 1.4.0 da gelen live() methodu ile artık sayfaya yeni eklenen elementleri tanıtmak için eventleri tekrar çalıştırmamız gerek kalmadı. Şimdi yukarıdaki event’i live() methodu kullanarak tekrar yazalım ve daha iyi anlayalım.

$(document).ready(function(){
$('p').live('click', function(){
$('p').parent().append('<p>Tıkla Bana</p>');
});
});

Kodumuz yukarıda nasıl olduğuna bakmak için tıklayın.

Gördüğümüz gibi son eklenen element ile ilk gelen element arasında bir fark yok. Yani ile paragrafa(p) tıklandığında da tıklama sonucu gelen paragrafa(p) da tıklandığında aynı tepkiyi görebiliyoruz. Bunu live methodu ile mümkün kıldık.

Son olarak live methoduna bir bakalım.

.live( eventType, handler )
eventType(Olay tipi): Click, hover, keydown, keyup gibi hangi olaya tepki vermesini belirlediğimiz kısım.
handler(işleyici): Olay gerçekleştiğinde çalışacak işleyici tanımladığımız kısım. Mesela ben örnekte yeni nesne ekledim.


5 Yorum Var

  1. 1 Kadir Malakcıoğlu said at 14:16 on Ekim 27th, 2012:

    Merhaba Şöyle birşey yapmak istiyorum ; index.php adında dosyam var ve ben bu sayfama ajax.php dosyasından veri çekiyorum çektiğim veride şöyle bir durum war

    yani ajax sonucu şöyle

    1.Gizle

    şimdi ise ajaxla gelen cevabın fonksiyonunu yazalım

    —script
    function Gizle(x){

    $(‘#a’).eq(x).fadeOut(500);
    //resme tıklayıp
    $(‘#a img’).eq(Eq).live(‘click’,function(){$(‘#a’).eq(Eq).fadeOut(500);});

    }
    — script

    istiyorum ki ajaxla sayfaya gelen a adında ki div içinde ki resime tıklayınca kaybolsun. Bunu Normal koşullarda live ile yapmak mümkün.Fakat a adında ki div ajaxla geldiği için buna etki edemiyorum.Bu sorun nasıl çözülebilir.

  2. 2 admin said at 15:11 on Ekim 28th, 2012:

    Öncelikle merhaba,

    jQuery’deki live özelliği deprecated oldu o yüzden delegate’i kullanmanızı öneririm. Sizin ihtiyacınızı sanırım aşağıdaki yapı görecektir. (Aşağıdaki kodu Gizle fonksiyonu yerine direkt kullanırsanız daha iyi olur.)

    $(document).delegate(“#a img”, “click”, function() {
    $(this).fadeOut(500);
    });

    Eğer #a dinamik değilse aşağıdaki daha performanslı olur

    $(“#a”).delegate(“img”, “click”, function() {
    $(this).fadeOut(500);
    });

  3. 3 muhammed said at 20:54 on Şubat 15th, 2015:

    teşekkür ederim makale için 🙂

  4. 4 Gamer07 said at 20:19 on Nisan 30th, 2016:

    Can hocam append ile eklenen nesne site sayfasında sayfa kaynagını göster diyince orda gözükmüyor neden acaba

  5. 5 admin said at 17:16 on Mayıs 22nd, 2016:

    Sayfa kaynağı sitenin sunucudan gelen kodunu gösterir her zaman. JavaScript ile düzenlenen halini görmek için eğer Chrome kullanıyorsanız Geliştirici Araçlarını kullanabilirsiniz. Kısayolu: Ctrl+Shift+I ile ulaşabilirsiniz. Diğer tarayıcılarda da benzer bir geliştirme aracı var.


Yorum Yap