<\/div>\n
\u00d6nceki yaz\u0131mlar\u0131mdan olan jQuery\u2019de live Fonksiyonu \u0130le Yeni Eklenen Elemanlara M\u00fcdahale Etme<\/a> ba\u015fl\u0131kl\u0131 yaz\u0131mda, yeni eklenen elemanlara live fonksiyonu ile m\u00fcdahale etmeyi irdelemi\u015ftik.\u0130lgili yaz\u0131da live fonksiyonun neden ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 sebepleriyle izah etmi\u015f, bunun yan\u0131nda jQuery 1.9 versiyonunda kesin olarak kald\u0131r\u0131\u011f\u0131n\u0131 belirtmi\u015ftim.Bu yaz\u0131m\u0131zda ise eski k\u00fct\u00fcphanedeki live fonksiyonun yerini alan on fonksiyonuna de\u011finece\u011fiz.\u0130\u015flevsel olarak live fonksiyonundan hi\u00e7 bir fark\u0131 bulunmamakla birlikte, pratikte olan basit farkl\u0131l\u0131klar mevcuttur.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/jquery-1.10.2.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>\nHat\u0131rlarsan\u0131z e\u011fer \u00f6nceki yaz\u0131m\u0131zla ayn\u0131 \u00f6rne\u011fi kullanmaktay\u0131m.Burada jQuery ile eklenen div elemanlar\u0131na click \u00f6zelli\u011fini on fonksiyonu ile tan\u0131mlamay\u0131 g\u00f6rece\u011fiz.Yukar\u0131daki \u015fekilde kullan\u0131ld\u0131\u011f\u0131 vakit yeni eklenen elemanlarda click \u00f6zelli\u011fi tetiklenememektedir.Bunun sebebini \u00f6nceki yaz\u0131mda izah etti\u011fim gibi $(document)’te sayfa y\u00fcklendi\u011fi esnada var olan elemanlar\u0131n g\u00f6r\u00fclmesidir.Sonradan eklenen elemanlar dokument’te g\u00f6r\u00fclemedi\u011fi i\u00e7in bu sorunla kar\u015f\u0131la\u015f\u0131lmaktad\u0131r.<\/p>\n
Ayriyetten dikkat etmeniz gereken bir di\u011fer hususta jQuery k\u00fct\u00fcphane versiyonudur.on fonksiyonu i\u00e7in 1.9 ve \u00fczeri versiyonlar\u0131 kullanman\u0131z yeterlidir.<\/p>\n
\u015eimdi a\u015fa\u011f\u0131da oldu\u011fu gibi on fonksiyonunu kullanal\u0131m.<\/p>\n
\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n    <script src="~\/Scripts\/jquery-1.10.2.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            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").on("click", function () {\r\n                alert($(this).html());\r\n            });\r\n        });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi on fonksiyonunu en basit \u015fekliyle click event\u0131na tan\u0131mlam\u0131\u015f olduk.Lakin bu \u015fekilde bir kullan\u0131m gene on fonksiyonunu \u00e7al\u0131\u015ft\u0131rmayacakt\u0131r.Bu durum olduk\u00e7a nazik bir kural\u0131n ihlal edilmesinden kaynaklanmaktad\u0131r.<\/p>\n
Kural\u0131m\u0131z \u015fudur.<\/p>\n
$(“se\u00e7ici”).on(…); \u015feklinde fonksiyonumuzun \u00e7al\u0131\u015fmas\u0131n\u0131 istiyorsak e\u011fer, se\u00e7ici ile tan\u0131mlanan eleman\u0131n daha \u00f6nceden olu\u015fturulmu\u015f olmas\u0131 gerekmektedir.Yani DOM’a \u00f6nceden y\u00fcklenmi\u015f bir eleman\u0131 vermemiz gerekmektedir.<\/p>\n
\u00d6rnek olarak a\u015fa\u011f\u0131daki kod blo\u011funu inceleyiniz.<\/p>\n
\r\n    <script type="text\/javascript">\r\n        $(document).ready(function () {\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            $(document).on("click", ".divKutu", function () {\r\n                alert($(this).html());\r\n            });\r\n        });\r\n    <\/script>\r\n<\/pre>\nYukar\u0131da g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi $(document) nesnesinin \u00fczerinde on fonksiyonu tan\u0131mlanm\u0131\u015ft\u0131r.document her daim var oldu\u011fundan dolay\u0131 on fonksiyonumuz sorunsuz \u00e7al\u0131\u015facakt\u0131r.<\/p>\n
Ya da<\/p>\n
\r\n    <script type="text\/javascript">\r\n        $(document).ready(function () {\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            $(".divKutular").on("click", ".divKutu", function () {\r\n                alert($(this).html());\r\n            });\r\n        });\r\n    <\/script>\r\n<\/pre>\ng\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi ayn\u0131 \u015fekilde “.divKutular” class de\u011ferine sahip divimiz \u00f6nceden tan\u0131mland\u0131\u011f\u0131 yani y\u00fcklendi\u011fi i\u00e7in, yani her daim var oldu\u011fu i\u00e7inde kullan\u0131labilir.<\/p>\n
Bir ba\u015fka \u00f6rnek vermek gerekirse e\u011fer,<\/p>\n
\r\n    <script type="text\/javascript">\r\n        $(document).ready(function () {\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            $("body").on("click", ".divKutu", function () {\r\n                alert($(this).html());\r\n            });\r\n        });\r\n    <\/script>\r\n<\/pre>\nG\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi body etiketide her daim var oldu\u011fu i\u00e7in on fonksiyonunu sorunsuz \u00e7al\u0131\u015ft\u0131racakt\u0131r.<\/p>\n
Asl\u0131nda buradaki temel mant\u0131k \u015fudur.\u00d6nceden tan\u0131mlanm\u0131\u015f bir eleman\u0131 se\u00e7icimizle belirttikten sonra, onun i\u00e7inde jQuery veyahut Ajax ile eklenecek yen DOM nesnelerine ula\u015fmay\u0131 istedi\u011fimizi belirtiyoruz.O y\u00fczden on fonksiyonunun kullan\u0131m tarz\u0131 yukar\u0131da verdi\u011fimiz \u00f6rneklerde oldu\u011fu gibidir.\u015eimdi on fonksiyonunu a\u015fa\u011f\u0131da sade bir \u015fekilde ele alal\u0131m.<\/p>\n
\r\n            $("\u00f6nceden tan\u0131mlanm\u0131\u015f eleman").on("olay", "fonksiyonun \u00e7al\u0131\u015ft\u0131raca\u011f\u0131 eleman\u0131n class veya id de\u011feri", function () {\r\n                \/\/\u0130\u015flemler\r\n            });\r\n<\/pre>\nDikkat ederseniz e\u011fer, \u00f6nceden tan\u0131mlanm\u0131\u015f elemana on fonksiyonunu uyguluyoruz ve on fonksiyonunun yeni eklenen hangi elemanlar\u0131n \u00fczerinde \u00e7al\u0131\u015ft\u0131r\u0131laca\u011f\u0131n\u0131 belirtiyoruz ve ard\u0131ndan fonksiyonun i\u00e7inde i\u015flemlerimizi ger\u00e7ekle\u015ftiriyoruz.<\/p>\n
\u00d6nceden tan\u0131mlanan bir eleman\u0131 de\u011filde, direkt olarak yukar\u0131larda verdi\u011fim bir \u00f6rnekte oldu\u011fu gibi yeni eklenen DOM elemanlar\u0131ndaki class ya da id de\u011ferini se\u00e7ip, on fonksiyonunu \u00fczerinde uygulamaya \u00e7al\u0131\u015f\u0131rsak e\u011fer, o yeni eklenen se\u00e7ici document’te y\u00fcklenirken bulunmad\u0131\u011f\u0131 i\u00e7in jQuery taraf\u0131ndan yakalanamamaktad\u0131r.O y\u00fczden \u00f6nceden eklenmi\u015f bir \u00fcst eleman\u0131 se\u00e7ip on fonksiyonunu uyguluyoruz.<\/p>\n
Son olarak;<\/p>\n
\r\n            $("body").on("click", function () {\r\n                alert($(this).html());\r\n            });\r\n<\/pre>\nBu \u015fekilde bir kullan\u0131m se\u00e7ilen eleman\u0131 direkt olarak verecektir.Lakin;<\/p>\n
\r\n            $("body").on("click", ".divKutu", function () {\r\n                alert($(this).html());\r\n            });\r\n<\/pre>\nBu \u015fekilde kullan\u0131rsak e\u011fer se\u00e7ilen eleman i\u00e7erisindeki class ya da id de\u011ferine sahip olan eleman\u0131 i\u015faretledi\u011fi i\u00e7in $(this) anahtar s\u00f6zc\u00fc\u011f\u00fc o i\u00e7teki eleman\u0131 getirecektir.<\/p>\n
Sonraki yaz\u0131lar\u0131mda g\u00f6r\u00fc\u015fmek \u00fczere…
\n\u0130yi \u00e7al\u0131\u015fmalar…<\/p>\n","protected":false},"excerpt":{"rendered":"
\u00d6nceki yaz\u0131mlar\u0131mdan olan jQuery\u2019de live Fonksiyonu \u0130le Yeni Eklenen Elemanlara M\u00fcdahale Etme ba\u015fl\u0131kl\u0131 yaz\u0131mda, yeni eklenen elemanlara live fonksiyonu ile m\u00fcdahale etmeyi irdelemi\u015ftik.\u0130lgili yaz\u0131da live fonksiyonun neden ve nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 sebepleriyle izah etmi\u015f, bunun...<\/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,847,848],"class_list":["post-3405","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","category-jquery","tag-jquery","tag-on","tag-on-fonksiyonu"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3405","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=3405"}],"version-history":[{"count":0,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/posts\/3405\/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=3405"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/categories?post=3405"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gencayyildiz.com\/blog\/wp-json\/wp\/v2\/tags?post=3405"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}