jQuery’de on Fonksiyonu İle Yeni Eklenen Elemanlara Müdahale Etme
Önceki yazımlarımdan olan jQuery’de live Fonksiyonu İle Yeni Eklenen Elemanlara Müdahale Etme başlıklı yazımda, yeni eklenen elemanlara live fonksiyonu ile müdahale etmeyi irdelemiştik.İlgili yazıda live fonksiyonun neden ve nasıl kullanıldığını sebepleriyle izah etmiş, bunun yanında jQuery 1.9 versiyonunda kesin olarak kaldırığını belirtmiştim.Bu yazımızda ise eski kütüphanedeki live fonksiyonun yerini alan on fonksiyonuna değineceğiz.İşlevsel olarak live fonksiyonundan hiç bir farkı bulunmamakla birlikte, pratikte olan basit farklılıklar mevcuttur.
Şimdi aşağıdaki kod bloğunu inceleyiniz.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.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>
Hatırlarsanız eğer önceki yazımızla aynı örneği kullanmaktayım.Burada jQuery ile eklenen div elemanlarına click özelliğini on fonksiyonu ile tanımlamayı göreceğiz.Yukarıdaki şekilde kullanıldığı vakit yeni eklenen elemanlarda click özelliği tetiklenememektedir.Bunun sebebini önceki yazımda izah ettiğim gibi $(document)’te sayfa yüklendiği esnada var olan elemanların görülmesidir.Sonradan eklenen elemanlar dokument’te görülemediği için bu sorunla karşılaşılmaktadır.
Ayriyetten dikkat etmeniz gereken bir diğer hususta jQuery kütüphane versiyonudur.on fonksiyonu için 1.9 ve üzeri versiyonları kullanmanız yeterlidir.
Şimdi aşağıda olduğu gibi on fonksiyonunu kullanalım.
<!DOCTYPE html>
<html>
<head>
<script src="~/Scripts/jquery-1.10.2.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").on("click", function () {
alert($(this).html());
});
});
</script>
</body>
</html>
Gördüğünüz gibi on fonksiyonunu en basit şekliyle click eventına tanımlamış olduk.Lakin bu şekilde bir kullanım gene on fonksiyonunu çalıştırmayacaktır.Bu durum oldukça nazik bir kuralın ihlal edilmesinden kaynaklanmaktadır.
Kuralımız şudur.
$(“seçici”).on(…); şeklinde fonksiyonumuzun çalışmasını istiyorsak eğer, seçici ile tanımlanan elemanın daha önceden oluşturulmuş olması gerekmektedir.Yani DOM’a önceden yüklenmiş bir elemanı vermemiz gerekmektedir.
Örnek olarak aşağıdaki kod bloğunu inceleyiniz.
<script type="text/javascript">
$(document).ready(function () {
var Sayac = 0;
$("#btnEkle").click(function () {
var divButonlar = $(".divKutular");
divButonlar.append("<div class=\"divKutu\">" + Sayac + "</div>");
Sayac++;
});
$(document).on("click", ".divKutu", function () {
alert($(this).html());
});
});
</script>
Yukarıda gördüğünüz gibi $(document) nesnesinin üzerinde on fonksiyonu tanımlanmıştır.document her daim var olduğundan dolayı on fonksiyonumuz sorunsuz çalışacaktır.
Ya da
<script type="text/javascript">
$(document).ready(function () {
var Sayac = 0;
$("#btnEkle").click(function () {
var divButonlar = $(".divKutular");
divButonlar.append("<div class=\"divKutu\">" + Sayac + "</div>");
Sayac++;
});
$(".divKutular").on("click", ".divKutu", function () {
alert($(this).html());
});
});
</script>
gördüğünüz gibi aynı şekilde “.divKutular” class değerine sahip divimiz önceden tanımlandığı yani yüklendiği için, yani her daim var olduğu içinde kullanılabilir.
Bir başka örnek vermek gerekirse eğer,
<script type="text/javascript">
$(document).ready(function () {
var Sayac = 0;
$("#btnEkle").click(function () {
var divButonlar = $(".divKutular");
divButonlar.append("<div class=\"divKutu\">" + Sayac + "</div>");
Sayac++;
});
$("body").on("click", ".divKutu", function () {
alert($(this).html());
});
});
</script>
Gördüğünüz gibi body etiketide her daim var olduğu için on fonksiyonunu sorunsuz çalıştıracaktır.
Aslında buradaki temel mantık şudur.Önceden tanımlanmış bir elemanı seçicimizle belirttikten sonra, onun içinde jQuery veyahut Ajax ile eklenecek yen DOM nesnelerine ulaşmayı istediğimizi belirtiyoruz.O yüzden on fonksiyonunun kullanım tarzı yukarıda verdiğimiz örneklerde olduğu gibidir.Şimdi on fonksiyonunu aşağıda sade bir şekilde ele alalım.
$("önceden tanımlanmış eleman").on("olay", "fonksiyonun çalıştıracağı elemanın class veya id değeri", function () {
//İşlemler
});
Dikkat ederseniz eğer, önceden tanımlanmış elemana on fonksiyonunu uyguluyoruz ve on fonksiyonunun yeni eklenen hangi elemanların üzerinde çalıştırılacağını belirtiyoruz ve ardından fonksiyonun içinde işlemlerimizi gerçekleştiriyoruz.
Önceden tanımlanan bir elemanı değilde, direkt olarak yukarılarda verdiğim bir örnekte olduğu gibi yeni eklenen DOM elemanlarındaki class ya da id değerini seçip, on fonksiyonunu üzerinde uygulamaya çalışırsak eğer, o yeni eklenen seçici document’te yüklenirken bulunmadığı için jQuery tarafından yakalanamamaktadır.O yüzden önceden eklenmiş bir üst elemanı seçip on fonksiyonunu uyguluyoruz.
Son olarak;
$("body").on("click", function () {
alert($(this).html());
});
Bu şekilde bir kullanım seçilen elemanı direkt olarak verecektir.Lakin;
$("body").on("click", ".divKutu", function () {
alert($(this).html());
});
Bu şekilde kullanırsak eğer seçilen eleman içerisindeki class ya da id değerine sahip olan elemanı işaretlediği için $(this) anahtar sözcüğü o içteki elemanı getirecektir.
Sonraki yazılarımda görüşmek üzere…
İyi çalışmalar…
Çok duacınız oldum güzel paylaşım.
işi rast gelsin dua çok duacın oldum. kaç gündür uğraşıyordum teşekkür ederim.
sık kullanılmayan terimlerden uzak güzel açıklayıcı bir yazı yazmışsınız hikaye kitabı okuyor gibiydim 5 yıl sonra bile faydanız dokundu teşekkür ederim
Ben teşekkür ederim 🙂
Ben bir arttırıyorum. Yazıdan 6 yıl sonra sorunum çözüldü. Sayesinde bir haftadır uğraştığım sorunu çözdüm. Çok teşekkürler
Teşekkürler
Usta helal olsun valla, 2 saattir çıldırtmıştı beni, saol varol oynuyosun bu oyunu. Emeğine sağlık.
Teşekkürler
çok değerli bilgi için teşekkür ederim.