jQuery trigger Fonksiyonunun Kullanımı
jQuery mimarisinde html elemanlarına bağlanan click, mousehover vs. gibi olaylar fiziksel olarak tetiklendikleri zaman çalışmaktadırlar. Örnek olarak bir a(link) elemanını baz alırsak eğer, click olayı a elemanına tıklandığı zaman çalışacaktır. trigger fonksiyonu sayesinde, a elemanına tanımlanmış olan click fonksiyonunu sanki a elemanına tıklanıyormuşcasına başka bir fonksiyon aracılığıyla tetikletebiliyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#btnTikla").click(function () {
alert("Butona tıklandı");
});
});
</script>
</head>
<body>
<input type="submit" value="Butona Tıkla" id="btnTikla" />
</body>
</html>
Örnek olarak yukarıdaki kod parçacığını baz alırsak eğer, butona tıklandığı zaman ilgili click fonksiyonu tetiklecek ve mesaj kutusu kullanıcıya gösterilecektir. Tabi bu işlemin cereyan etmesi için butona fiziksel olarak tıklanması gerekecektir.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#linkAc").click(function () {
alert("Linke tıklandı");
});
});
</script>
</head>
<body>
<a href="http://www.gencayyildiz.com" target="_blank" id="linkAc">Sayfayı Aç</a>
</body>
</html>
Ya da bir önceki örneğimizde bahsettiğimiz durumu, yukarıda da örneklendirebiliriz.
trigger komu sayesinde bizler farklı tetiklenmeler sürecinde, farklı olaylarıda fiziksel tetiklenmişcesine işleve sokabiliyoruz.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#btnTikla").click(function () {
alert("Butona tıklandı");
});
$("#btnTikla").trigger("click");
});
</script>
</head>
<body>
<input type="submit" value="Butona Tıkla" id="btnTikla" />
</body>
</html>
Buton örneğimizde yapmış olduğum güncellemeyi incelersek eğer, sayfa yüklenirken trigger sayesinde butona bağlanmış click fonksiyonunu çağırıyoruz. İşte bu hamle neticesinde sanki butona tıklamışız gibi ilgili mesaj ekranda gösterilecektir.
Aynı mantıkla diğer örneğimizide güncelleyelim.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="jquery-1.12.0.min.js" type="text/javascript"></script>
<script>
$(document).ready(function () {
$("#linkAc").click(function () {
alert("Linke tıklandı");
});
$("#btnTikla").trigger("click");
});
</script>
</head>
<body>
<a href="http://www.gencayyildiz.com" target="_blank" id="linkAc">Sayfayı Aç</a>
</body>
</html>
Evet, gördüğünüz gibi trigger fonksiyonu aracılığıyla farklı fonksiyonları rahatlıkla tetikleyebiliyoruz.
İyi çalışmalar dilerim…
Teşekkürler