<\/div>\n

jQuery ile dinamik bir \u015fekilde html elemanlar\u0131m\u0131z\u0131 i\u015faretleyebiliyor ve istedi\u011fimiz m\u00fcdahaleyi ger\u00e7ekle\u015ftirebiliyoruz.Lakin bilinen bu i\u015flemlerin hemen hemen hepsi $(document) \u00fczerinde yani DOM’da olan ve sayfaya y\u00fcklenen nesneler i\u00e7in ge\u00e7erlidir.Peki, biz jQuery ile yeni bir html eleman olu\u015fturup sayfaya y\u00fckledi\u011fimizde ya da Ajax ile success fonksiyonu sonucu benzer bir senaryo ger\u00e7ekle\u015ftirdi\u011fimizde bu yeni elemanlar\u0131 jQuery ile se\u00e7ip \u00fczerinde i\u015flem yapabiliyor muyuz?Hay\u0131r.Bunun sebebi, jQuery sayfan\u0131n ilk y\u00fcklendi\u011fi elemanlar\u0131 g\u00f6rebilmesi ve o elemanlar \u00fczerinde i\u015flem yapabilmesinden kaynaklan\u0131yor.<\/p>\n

Bu yaz\u0131m\u0131zda, sayfaya eklenen yeni DOM nesnelerine jQuery ile m\u00fcdahale etmeyi g\u00f6rece\u011fiz.Bu i\u015flemi jQuery k\u00fct\u00fcphanesinin en son 1.7 versiyonlar\u0131nda bulunan ve 1.9 versiyonunda kesin olarak kald\u0131r\u0131lan live metoduyla ger\u00e7ekle\u015ftirece\u011fiz.<\/p>\n

Neden eski bir yap\u0131 olan live fonksiyonu \u00fczerine i\u00e7erik olu\u015fturdu\u011fumu sorarsan\u0131z e\u011fer bunun iki temel sebebi vard\u0131r.Bu sebeplere de\u011findikten sonra mevzuya giri\u015f yapal\u0131m.<\/p>\n

Haz\u0131r Templateler<\/strong>
Piyasada \u00fccretli ve \u00fccretsiz bir \u00e7ok profesyonel haz\u0131r template bulunmakta ve bir \u00e7ok yaz\u0131l\u0131mc\u0131 bu templateler \u00fczerinde \u00e7al\u0131\u015fmalar\u0131n\u0131 ger\u00e7ekle\u015ftirmektedir.Haliyle haz\u0131r templateler genellikle bir kere tasarlanmakta ve kullan\u0131ld\u0131klar\u0131 yap\u0131larda g\u00fcncellemeler oldu\u011fu zamanlarda geli\u015ftiricileri taraf\u0131ndan bu g\u00fcncellemelere e\u015flik yap\u0131lmamaktad\u0131r.Eee haliyle haz\u0131r template kullanan bireyler jQuery k\u00fct\u00fcphanesinin eski versiyonlar\u0131yla \u00e7al\u0131\u015fmak mecburiyetinde kalmalar\u0131 y\u00fcksek ihtimal oldu\u011fu i\u00e7in eskide olsa bu tarz yap\u0131lara ihtiya\u00e7 duymaktad\u0131r.<\/li>\n

\nYerine Geli\u015ftirilen Yap\u0131lar<\/strong>
live fonksiyonu yerine on ve bind gibi yeni yap\u0131lar geli\u015ftirilmi\u015ftir.Haliyle yeni yap\u0131lar\u0131 \u00f6\u011frenirken \u00f6nceki yap\u0131lar \u00fczerinden mukayese edebilmek her zaman verimli bir \u00f6\u011frenme sa\u011flayacakt\u0131r.Haliyle bu yaz\u0131dan sonra jQuery k\u00fct\u00fcphanesinin yeni versiyon yap\u0131s\u0131ndaki on ve bind kal\u0131plar\u0131na de\u011finirken, bu i\u00e7erik bizim merkezimiz olacakt\u0131r.\n<\/li>\n<\/ol>\n
\u015eimdi konuya giri\u015f yapmadan \u00f6nce de\u011finmem gereken son bir husus var.Yukar\u0131da da bahsetti\u011fim gibi jQuery ile live fonksiyonu en son 1.9 versiyonunda kald\u0131r\u0131lm\u0131\u015ft\u0131r ve 1.7 versiyonlar\u0131nda bu fonksiyonu kullanabilmekteyiz.E\u011fer sizler kendi \u00e7al\u0131\u015fmalar\u0131n\u0131zda live fonksiyonunu kullanacaksan\u0131z https:\/\/code.jquery.com\/jquery\/<\/a> adresinden 1.7 versiyonlar\u0131ndan birini indirebilir ya da direkt olarak jquery-1.7.0<\/a> adresinden indirebilirsiniz.<\/p>\n
Evet, \u015fimdi mevzuya dal\u0131\u015f yapabiliriz…<\/p>\n
\u00d6ncelikle a\u015fa\u011f\u0131daki kod blo\u011funu inceleyelim.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/jquery-1.7.0.js"><\/script>\r\n <style type="text\/css">\r\n .divKutu {\r\n text-align: center;\r\n vertical-align: middle;\r\n width: 50px;\r\n height: 50px;\r\n background-color: antiquewhite;\r\n border: ridge;\r\n border-color: aquamarine;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <input type="submit" value="Buton Ekle" id="btnEkle" \/>\r\n <div class="divKutular">\r\n <div class="divKutu">-1<\/div>\r\n <\/div>\r\n <script type="text\/javascript">\r\n $(document).ready(function () {\r\n\r\n var Sayac = 0;\r\n $("#btnEkle").click(function () {\r\n var divButonlar = $(".divKutular");\r\n divButonlar.append("<div class=\\"divKutu\\">" + Sayac + "<\/div>");\r\n Sayac++;\r\n });\r\n\r\n $(".divKutu").click(function () {\r\n alert($(this).html());\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Yukar\u0131daki kod blo\u011funda id de\u011feri “btnEkle” olan butonumuza d\u0131kland\u0131\u011f\u0131 zaman class de\u011feri “divKutular” olan divin i\u00e7erisine class de\u011feri “divKutu” olan elemanlar eklenmektedir.Ama dikkat etmeniz gereken husus, “divKutular” class de\u011ferine sahip divin i\u00e7erisinde bir tane varsay\u0131lan olara div eklenmi\u015ftir.<\/p>\n
\u015eimdi bu yap\u0131y\u0131 kulland\u0131\u011f\u0131m\u0131z zaman neler oluyor inceleyelim.<\/p>\n
$\"jQuery'de$ <\/a><\/p>\n
Yukar\u0131daki gif format\u0131na bakarsan\u0131z e\u011fer, varsay\u0131lan olarak bulunan div eleman\u0131na t\u0131kland\u0131\u011f\u0131 zaman \u00e7al\u0131\u015fan fonksiyonumuz, jQuery sayesinde eklenen yeni div elemanlar\u0131na t\u0131kland\u0131\u011f\u0131 zaman tetiklenmemektedir.Bunun sebebi yukar\u0131larda bahsetti\u011fimiz gibi $(document) ilk y\u00fcklenen elemanlar\u0131 g\u00f6rebilmesidir.jQuery ile ekledi\u011fimiz yeni elemanlar ilk y\u00fcklenen elemanlar olmad\u0131\u011f\u0131 i\u00e7in $(document) taraf\u0131ndan alg\u0131lanmamaktad\u0131r.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131daki yap\u0131y\u0131 inceleyiniz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n <script src="~\/Scripts\/jquery-1.7.0.js"><\/script>\r\n <style type="text\/css">\r\n .divKutu {\r\n text-align: center;\r\n vertical-align: middle;\r\n width: 50px;\r\n height: 50px;\r\n background-color: antiquewhite;\r\n border: ridge;\r\n border-color: aquamarine;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <input type="submit" value="Buton Ekle" id="btnEkle" \/>\r\n <div class="divKutular">\r\n <div class="divKutu">-1<\/div>\r\n <\/div>\r\n <script type="text\/javascript">\r\n $(document).ready(function () {\r\n\r\n var Sayac = 0;\r\n $("#btnEkle").click(function () {\r\n var divButonlar = $(".divKutular");\r\n divButonlar.append("<div class=\\"divKutu\\">" + Sayac + "<\/div>");\r\n Sayac++;\r\n });\r\n\r\n $(".divKutu").live("click", function () {\r\n alert($(this).html());\r\n });\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Dikkat ederseniz e\u011fer, jQuery ile eklenen yeni DOM nesnelerinde belirtilen class de\u011ferine \u00f6zel olarak live fonksiyonu tan\u0131mlanm\u0131\u015ft\u0131r.Bu fonksiyon ile jQuery’e “class de\u011feri divKutu olarak eklenen yeni DOM nesnesini ilk y\u00fcklenen d\u00f6k\u00fcman eleman\u0131 olarak g\u00f6r ve belirtti\u011fim olayla i\u015faretle”<\/i> komutunu verdi\u011fimizi d\u00fc\u015f\u00fcn\u00fcn.<\/p>\n
live fonksiyonunu kulland\u0131\u011f\u0131m\u0131z zaman yeni eklenen DOM nesnelerine m\u00fcdahaleyi rahat\u00e7a ger\u00e7ekle\u015ftirebiliyoruz.<\/p>\n
\u015eimdi live fonksiyonunun prototipini a\u015fa\u011f\u0131da ele alal\u0131m.<\/p>\n
\r\n $(".divKutu").live("click", function () {\r\n alert($(this).html());\r\n });\r\n<\/pre>\n
live fonksiyonu yukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi kullan\u0131lmakta ve iki parametre arac\u0131l\u0131\u011f\u0131yla rahat\u00e7a kullan\u0131labilmektedir.\u0130lk parametresine se\u00e7ilecek eleman\u0131n hangi event\u0131nda devreye girece\u011fini belirtirken, ikinci parametrede i\u015flevsel fonksiyonu belirtiyoruz.Yukar\u0131daki prototip se\u00e7ilecek eleman i\u00e7in click event\u0131 i\u00e7in tan\u0131mlanm\u0131\u015ft\u0131r.<\/p>\n
\r\n $(".divKutu").live("dblclick", function () {\r\n alert($(this).html());\r\n });\r\n<\/pre>\n
Bu tan\u0131mlamada ise dblclick event\u0131na bir tan\u0131mlama yap\u0131lm\u0131\u015ft\u0131r.<\/p>\n
\r\n $(".divKutu").live("mouseenter", function () {\r\n alert($(this).html());\r\n });\r\n<\/pre>\n
Bu tan\u0131mlama ise mouseenter event\u0131n\u0131 tetikleyecektir.Yani se\u00e7ilecek eleman\u0131n \u00fcst\u00fcne mouse ile gelindi\u011fine devreye girecektir.<\/p>\n
G\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi live fonksiyonu ile yeni eklenen DOM nesnelerine tetikleme yaratabiliyoruz.<\/p>\n
Sonraki yaz\u0131lar\u0131mda live fonksiyonunun yeni versiyonu olan on ve bind fonksiyonlar\u0131 \u00fczerine konu\u015faca\u011f\u0131z.<\/p>\n
\u015eimdilik g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar dilerim…<\/p>\n","protected":false},"excerpt":{"rendered":"
jQuery ile dinamik bir \u015fekilde html elemanlar\u0131m\u0131z\u0131 i\u015faretleyebiliyor ve istedi\u011fimiz m\u00fcdahaleyi ger\u00e7ekle\u015ftirebiliyoruz.Lakin bilinen bu i\u015flemlerin hemen hemen hepsi $(document) \u00fczerinde yani DOM’da olan ve sayfaya y\u00fcklenen nesneler i\u00e7in ge\u00e7erlidir.Peki, biz jQuery ile yeni bir...<\/p>\n","protected":false},"author":1,"featured_media":3401,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18,19],"tags":[748,845,846],"class_list":["post-3388","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-jquery","tag-live","tag-live-fonksiyonu"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/comments?post=3388"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3388\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media\/3401"}],"wp:attachment":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/media?parent=3388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}