Onur Altınsoy Onur Altınsoy
top logo

YAZIŞALIM

KONUŞALIM

542 746 2726

jQuery ile Dinamik Oluşturulan Elemanı Seçme

jQuery ile dinamik oluşturulan elemanlara bazı fonksiyonlar  ile ulaşamıyoruz

jQuery ile html() veya append() benzeri fonksiyonlar ile oluşturduğumuz elemanlara click(), hover() vb. fonksiyonlarla ulaşamıyoruz.

Bir örnekle açıklamak gerekirse aşağıda “oluştur” butonuna basıldığında yanındaki kutuyu kopyalayan bir kod yazdım, kutuların classı “box”, butona tıklandığında “wrap” id’li divin içerisine yeni bir “box” append ediyorum. click() fonksiyonu ile kutuya tıklandığında tüm kutuları kırmızı renge çeviriyorum fakat sonradan oluşturduğum kutulara tıkladığımda bu fonksiyonun çalışmadığını göreceksiniz. Örnek aşağıda.

Örnek

on() fonksiyonu kullanımı

Bu sorunun çözümüne bakalım şimdi de, tabi ki alternatif metodlar da olabilir fakat benim çözümüm genellikle on() fonksiyonudur, bu fonksiyonla html içerisinde dinamik oluşturulsa bile tüm elemanlara click, hover vs.  event atayabiliyoruz. Versiyon 1.7’den itibaren karşımıza çıkan bu fonksiyonun kullanım şekli aşağıdaki gibidir.

Şimdi ilk örneğimdeki sorunu çözüme kavuşturalım, aynı kodlar içerisinde click() fonksiyonunu commentleyip altına on() fonksiyonunu yazıyorum. Örnek aşağıdadır.

Sonradan oluşturulan kutulara tıkladığınızda renklerinin kırmızıya döndüğünü görüyorum. Artık dinamik oluşturulan kutulara da tıklayarak ulaşabiliyorum.

Örnek

Yazıyı Paylaş :

Diğer Yazılar

Bir cevap yazın