jQuery’de live Fonksiyonu İle Yeni Eklenen Elemanlara Müdahale Etme
jQuery ile dinamik bir şekilde html elemanlarımızı işaretleyebiliyor ve istediğimiz müdahaleyi gerçekleştirebiliyoruz.Lakin bilinen bu işlemlerin hemen hemen hepsi $(document) üzerinde yani DOM’da olan ve sayfaya yüklenen nesneler için geçerlidir.Peki, biz jQuery ile yeni bir html eleman oluşturup sayfaya yüklediğimizde ya da Ajax ile success fonksiyonu sonucu benzer bir senaryo gerçekleştirdiğimizde bu yeni elemanları jQuery ile seçip üzerinde işlem yapabiliyor muyuz?Hayır.Bunun sebebi, jQuery sayfanın ilk yüklendiği elemanları görebilmesi ve o elemanlar üzerinde işlem yapabilmesinden kaynaklanıyor.
Bu yazımızda, sayfaya eklenen yeni DOM nesnelerine jQuery ile müdahale etmeyi göreceğiz.Bu işlemi jQuery kütüphanesinin en son 1.7 versiyonlarında bulunan ve 1.9 versiyonunda kesin olarak kaldırılan live metoduyla gerçekleştireceğiz.
Neden eski bir yapı olan live fonksiyonu üzerine içerik oluşturduğumu sorarsanız eğer bunun iki temel sebebi vardır.Bu sebeplere değindikten sonra mevzuya giriş yapalım.
- Hazır Templateler
Piyasada ücretli ve ücretsiz bir çok profesyonel hazır template bulunmakta ve bir çok yazılımcı bu templateler üzerinde çalışmalarını gerçekleştirmektedir.Haliyle hazır templateler genellikle bir kere tasarlanmakta ve kullanıldıkları yapılarda güncellemeler olduğu zamanlarda geliştiricileri tarafından bu güncellemelere eşlik yapılmamaktadır.Eee haliyle hazır template kullanan bireyler jQuery kütüphanesinin eski versiyonlarıyla çalışmak mecburiyetinde kalmaları yüksek ihtimal olduğu için eskide olsa bu tarz yapılara ihtiyaç duymaktadır. -
Yerine Geliştirilen Yapılar
live fonksiyonu yerine on ve bind gibi yeni yapılar geliştirilmiştir.Haliyle yeni yapıları öğrenirken önceki yapılar üzerinden mukayese edebilmek her zaman verimli bir öğrenme sağlayacaktır.Haliyle bu yazıdan sonra jQuery kütüphanesinin yeni versiyon yapısındaki on ve bind kalıplarına değinirken, bu içerik bizim merkezimiz olacaktır.
Şimdi konuya giriş yapmadan önce değinmem gereken son bir husus var.Yukarıda da bahsettiğim gibi jQuery ile live fonksiyonu en son 1.9 versiyonunda kaldırılmıştır ve 1.7 versiyonlarında bu fonksiyonu kullanabilmekteyiz.Eğer sizler kendi çalışmalarınızda live fonksiyonunu kullanacaksanız https://code.jquery.com/jquery/ adresinden 1.7 versiyonlarından birini indirebilir ya da direkt olarak jquery-1.7.0 adresinden indirebilirsiniz.
Evet, şimdi mevzuya dalış yapabiliriz…
Öncelikle aşağıdaki kod bloğunu inceleyelim.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.7.0.js"></script>
<style type="text/css">
.divKutu {
text-align: center;
vertical-align: middle;
width: 50px;
height: 50px;
background-color: antiquewhite;
border: ridge;
border-color: aquamarine;
}
</style>
</head>
<body>
<input type="submit" value="Buton Ekle" id="btnEkle" />
<div class="divKutular">
<div class="divKutu">-1</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Sayac = 0;
$("#btnEkle").click(function () {
var divButonlar = $(".divKutular");
divButonlar.append("<div class=\"divKutu\">" + Sayac + "</div>");
Sayac++;
});
$(".divKutu").click(function () {
alert($(this).html());
});
});
</script>
</body>
</html>
Yukarıdaki kod bloğunda id değeri “btnEkle” olan butonumuza dıklandığı zaman class değeri “divKutular” olan divin içerisine class değeri “divKutu” olan elemanlar eklenmektedir.Ama dikkat etmeniz gereken husus, “divKutular” class değerine sahip divin içerisinde bir tane varsayılan olara div eklenmiştir.
Şimdi bu yapıyı kullandığımız zaman neler oluyor inceleyelim.
Yukarıdaki gif formatına bakarsanız eğer, varsayılan olarak bulunan div elemanına tıklandığı zaman çalışan fonksiyonumuz, jQuery sayesinde eklenen yeni div elemanlarına tıklandığı zaman tetiklenmemektedir.Bunun sebebi yukarılarda bahsettiğimiz gibi $(document) ilk yüklenen elemanları görebilmesidir.jQuery ile eklediğimiz yeni elemanlar ilk yüklenen elemanlar olmadığı için $(document) tarafından algılanmamaktadır.
Şimdi aşağıdaki yapıyı inceleyiniz.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.7.0.js"></script>
<style type="text/css">
.divKutu {
text-align: center;
vertical-align: middle;
width: 50px;
height: 50px;
background-color: antiquewhite;
border: ridge;
border-color: aquamarine;
}
</style>
</head>
<body>
<input type="submit" value="Buton Ekle" id="btnEkle" />
<div class="divKutular">
<div class="divKutu">-1</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
var Sayac = 0;
$("#btnEkle").click(function () {
var divButonlar = $(".divKutular");
divButonlar.append("<div class=\"divKutu\">" + Sayac + "</div>");
Sayac++;
});
$(".divKutu").live("click", function () {
alert($(this).html());
});
});
</script>
</body>
</html>
Dikkat ederseniz eğer, jQuery ile eklenen yeni DOM nesnelerinde belirtilen class değerine özel olarak live fonksiyonu tanımlanmıştır.Bu fonksiyon ile jQuery’e “class değeri divKutu olarak eklenen yeni DOM nesnesini ilk yüklenen döküman elemanı olarak gör ve belirttiğim olayla işaretle” komutunu verdiğimizi düşünün.
live fonksiyonunu kullandığımız zaman yeni eklenen DOM nesnelerine müdahaleyi rahatça gerçekleştirebiliyoruz.
Şimdi live fonksiyonunun prototipini aşağıda ele alalım.
$(".divKutu").live("click", function () {
alert($(this).html());
});
live fonksiyonu yukarıda gördüğünüz gibi kullanılmakta ve iki parametre aracılığıyla rahatça kullanılabilmektedir.İlk parametresine seçilecek elemanın hangi eventında devreye gireceğini belirtirken, ikinci parametrede işlevsel fonksiyonu belirtiyoruz.Yukarıdaki prototip seçilecek eleman için click eventı için tanımlanmıştır.
$(".divKutu").live("dblclick", function () {
alert($(this).html());
});
Bu tanımlamada ise dblclick eventına bir tanımlama yapılmıştır.
$(".divKutu").live("mouseenter", function () {
alert($(this).html());
});
Bu tanımlama ise mouseenter eventını tetikleyecektir.Yani seçilecek elemanın üstüne mouse ile gelindiğine devreye girecektir.
Gördüğünüz gibi live fonksiyonu ile yeni eklenen DOM nesnelerine tetikleme yaratabiliyoruz.
Sonraki yazılarımda live fonksiyonunun yeni versiyonu olan on ve bind fonksiyonları üzerine konuşacağız.
Şimdilik görüşmek üzere…
İyi çalışmalar dilerim…
Teşeekkürler