Ana Sayfa JavaScript jQuery ile Dinamik Eklenen Nesnelere Ulaşmak

jQuery ile Dinamik Eklenen Nesnelere Ulaşmak

by Sinan BOZKUŞ
7.092 kez okundu

Javascript/Jquery ile sayfanın temel HTML kodlarında olmayan ancak sonradan eklediğimiz nesnelere class veya id tanımlasak dahi ulaşamıyoruz. Bu DOM yapısıyla alakalı. DOM’un detaylarına girmeyip kısaca çözümünü anlatacağım. HTML DOM ile ilgili internette onlarca makale mevcut, araştırabilirsiniz :)

Dinamik nesnelere jQuery’nin eski versiyonlarında “live” methodu ile erişiyorduk, bu method en son jQuery 1.7 versiyonunda kullanıldı ve 1.9 ile tamamen kaldırıldı. Bunun yerine “on” methodundan faydalanacağız.

jQuery kullanıpta “on” methodunu bilmeyen yoktur sanırım, bütün event ler bu method üzerinden kullanılır. Normal kullanımı aşağıdaki gibidir;

[html]
<div class="panel>
<button class="buttons">Tıkla</button>
</div>
[/html]

[javascript]
<script>
$(‘.buttons’).on(‘click’, function(){
alert(‘butona tıklandı!’);
});
</script>
[/javascript]

Yukarıdaki örnekte div’in içerisine dinamik olarak yeni bir button daha oluşturursak click methodumuz bu button’a tıklandığında çalışmayacaktır.

Buraya kadar her şey bilediğimiz gibiydi… Şimdi farklı bir mantık yürüteceğiz.
Ben dinamik olarak eklediğim nesneye erişemiyorum ancak o nesnenin üst elemanı olan kapsayıcı nesneye (parent) erişebiliyorum. Yani yukarıdaki örneğe göre “panel” class’ı olan div’e rahat bir şekilde erişebiliyorum. Demekki önce panel class’ımı kullanan div’e ondan sonra altındaki dinamik olarak eklenmiş nesnelerime erişemem gerekiyor.

[javascript]
<script>
$(‘.panel’).on(‘click’, ‘.buttons’, function(){
alert(‘butona tıklandı!’);
});
</script>
[/javascript]

Eğer kodumu yukarıdaki gibi önce panel’in click event’ini çalıştırıp, daha sonra da içerisindeki buttons class’larına uygulatırsam bundan sonra ne kadar dinamik button eklenirse eklensin click eventi çalışacaktır.

Bunlara da bakmak isteyebilirsiniz

3 yorum

Hakan 20 Ekim 2015 - 15:07

Tam aradığım şey, teşekkürler!

Yanıtla
Süleyman 27 Ocak 2019 - 01:39

Bu durum bootstrap ile hazırlanan sayfanın responsive olarak ufak ekranda table nesnesinin daralması ile butonların accordion içerisine kendliğinden girmesinden de kaynaklanabilir bizzat yaşadığım ve çok sinir edici bir durum oluğu için paylaşmak istedim.
Bu arada neredeyse sitenizi baştan sona okudum. .Net Core bölümü ihtiyacım olduğundan fevkaladeydi elinize kolunuza sağlık..!

Yanıtla
Sinan BOZKUŞ 28 Ocak 2019 - 10:34

Teşekkürler!

Yanıtla

Bir Yorum Bırakın