JQUERY İLE DİNAMİK OLUŞTURULAN ELEMENTE OLAY BAĞLAMA

JQUERY İLE DİNAMİK OLUŞTURULAN ELEMENTE OLAY BAĞLAMA

16 Ocak 2018

JQUERY İLE DİNAMİK OLUŞTURULAN ELEMENTE OLAY BAĞLAMA

         Web 3.0+ ile etkileşimli web sitelerinin beraberinde jquery sayesinde AJAX kullanarak html DOM'u dinamik olarak değiştirmek, güncellemek oldukça yaygın bir kullanıma sahip. Kullanışlılık açısından kolaylığı yanı sıra kullanıcı tarafında da hem görsel hem de işlevsel anlamda büyük artılar getirmekte. Sunucu tarafında ise sayfanın tamamı sürekli render edilmediği için iş yükünden tasarruf söz konusu.

         Sayfa render edildiği sırada var olan elementleri jquery ile yazdığınız olaylar arasında bağlamak oldukça kolay ve çok bilinen bir yöntemdir. Diyelim ki deneme class'ına sahip bir elementimiz var ve bunun click olayında bir mesaj ekranda göstermek istiyoruz. Bunun kodu bilindiği üzere şu şekilde oluyor:

         $(document).ready(function () {
               $('.deneme').on('click', function () {
                     // Tıklandığında yürütülecek kod
               });
         });

JQUERY İLE DİNAMİK OLUŞTURULAN ELEMENTE OLAY BAĞLAMA

         Sayfa yüklendiğinde deneme class'ına sahip mevcut tüm elementlerin tıklanma olayında kodumuz sıkıntısız çalışıyor. Ancak sayfamınızın render edildiği esnada ilgili elementimiz yoksa ve bunu dinamik olarak elde ettiğimizde jquery bu element ile olay arasında bağlantıyı kuramayacak ve kodumuz çalışmayacaktır.

         Bunun çözümü ise, diyelim ki bir tuşa her basıldığında aynı sayfa içerisinde arama verilerini AJAX ile canlı olarak gösterdiğimiz ve gelen her verinin yanında ilgili işlemi yaptırmak istediğimiz islemYap class'ına sahip bir butonumuz olsun. O zaman kullanmamız gereken kod aşağıdaki gibi olmalıdır.

         $(document).ready (function () {
              $(document).on('click', ".islemYap", function () {
                   // Yapılmak istenen işlem
              });
         });

         Bu sorunu şu şekilde giderdik; elementleri dinamik olarak eklediğimiz dış öğeler içerisinde (burada document) on yöntemi ile click olayını tetikledik ve ikinci bir bağımsız değişken olarak işlem yaptırmak istediğimiz selector'u belirttik. On yönteminin iki kullanım arasındaki fark; ilk kodda sayfayı render etme aşamasında var olan tüm geçerli öğelere bu yöntemi bağlarken ikinci kodda ise seçilen elementleri dinamik olarak document nesnesi altında bulur ve belirtilen olayı o element için tetikler. On'un bu ikinci halinin kullanımında, dış elemana her tıklandığında çocuklarının DOM'unu dolaştığından, dinamik olarak oluşturulan bir durum olmadığı sürece birincisinin yerine kullanılması tavsiye edilmez.