Ajax ile formu post ettikten ve load ile anı sayfayı yeniden yükledikten sonra butonların çalışmaması
Merhaba arkadaşlar. Ajax ile form post edildikten ve sayfa load() ile yeniden yüklendikten sonra hiçbir buton, tıklandığında yapması gerekeni yapmıyor, ta ki sayfa yenilenene kadar. Aşağıdaki koda bakın:
kod
<form method="POST" id="yorumFormu">
<label for="yorum">Yorumunuz: <textarea name="yorum" id="yorum" cols="60" rows="20" aria-label="Yorumunuz"></textarea></label>
<button type="button" id="yorumGonder">Yorumu gönder</button>
</form>
<script>
$("#yorumGonder").on("click",function(){
$.post("yorum-ekle.php",$("#yorumFormu").serialize(),function(basarili){
alert(basarili);
setTimeout(() => {
$("body").load(window.location.href);
}, 1000);
});
});
</script>
Sevgiler
/*
önce olay dinleyicilerinin parent elementini tanımla
bu şu demek bu elementin içinde olan olay dinleyicilerine
bir şekilde yenisi eklenirse yada benzer bir değişiklik yapılırsa
yeni gelen elementte tanımlı click yada başka olay dinlemesini uygula
*/
const parent = document.getElementById("form1"); //bu durumda form olsun bir div de olabilir
//diyelim ki içinde ki check box yada submit işlemleri için olay dinleyicimiz var.
parent.addEventListener("click", ajaxFunction);
function ajaxFunction(e){
//
if(e.target && e.target.matches("yorum_gonder")){ //submit elementine ait id sınıf ta olabilir
javascript ajax işlemleri
}
}
/*
aslında bu örnekte buna gerek yok ama diyelim ki dinamik olarak yorumları 10 ar 10 ar
sayfaya çağırıyorsunuz yorum elementlerinin içinde beğen diye bir click var yani bir olay dinleyicimiz var demek.
Sayfaya sonradan içinde olay eventi olan element eklendğinde bunu innerHTML ile yaptığınızda içine yazdığınız o elemente ait bütün olay dinleyicileri yok olur.
Bunun önüne yukarıda ki gibi geçilebilir.
Başka çözüm yolları da yeşillendiren olursa yazsın.