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
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (15)
/*
ö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.
@fatihozpolat
Ama sizin yazdığınız sayfayı yeniliyor. Ben load() gibi sayfa yenilenmeden içeriği değiştiren bir şey istiyorum.
$("body").load(window.location.href);
bu satırı
location.reload();
ile değiştirin.
@abdullahx Dediğinin ne işe yaradığını anladım da böyle bir şey yapmanın sitem açısından doğru olacağını sanmıyorum. Çünkü ben anlık bir çözüm değil, load işleminden sonra tüm butonları çalıştırabilecek bir çözüm istiyorum. Bootstrap kullanmasaydım, tüm butonların onclick olaylarını düzeltirdim fakat bu mümkün değil.
@abdullahx Bunu araştıracağım çünkü bilmiyorum nasıl yapılacağını. Eğer anlayamazsam sorabilirim. Teşekkürler @abdullahx
@korayozdemir4 Bunun çalışabileceğini anlatan bir yorumu stack overflow'da da gördüm. Fakat bunu sadece kendi .js kodlarım için yapabilirim. Bootstrap yardımıyla oluşturduğum dropdown butonlarının onclick olaylarını nasıl belirleyeceğim?
$(document).on("click", "#yorumGonder", function () {} olarak dener misiniz?
Gençler çok araştırdım çözümü buldum. Sayfa yenilendikten sonra click olayını yeniden yapmamız gerekiyormuş. Fakat ben bootstrap falan da kullanıyorum, o butonların onclick olayını nasıl yeniden yaparım hiç bilmiyorum.
@hakankorkz Bir örnek verebilir misin? Tam olarak anlayamadım.
document.body belirtiniz sayfada muhtemelen çözülecektir..
Başka bir yerde test ettim ve load() fonksiyonu çalıştırıldıktan sonra sayfanın hiçbir yerine tıklama yapılamadığını gördüm. Fikri olan var mı?
@abdullahx
Load işlemini ben gönderilen yorum gözüksün diye yapıyorum, formu resetlemek istesem load kullanmam.