Jquery ile oluşturduğum buton tepki vermiyor
Herkese iyi çalışmalar jquery ile dinamik ekleme işlemi yapıyorum veritabanına veri ekliyorum ve eklenen veriyi ekrana yazdırıyorum fakat eklenen veri üzerinde yine dinamik olarak silmek istiyorum buton koydum fakat butona tıklayınca tepki vermiyor
class yerine id ilede seçtirdim yine tepki yok
buton kodu:
< button class="deleteContent">Sil< button>
jquery kodum:
$(".deleteContent").click(function(){
alert ("evet");
});
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
olay dinleyicisini butona değil verlerin dinamik eklendiği parent elemente göre ayarlamalısın
div id delbutons
buton zaten olan buton
buton sonradan eklenwn
div end
let parentEl = document.getElementByid("delbutons");
parentEl.addEventListener("click", => e {
if(e.target.className == butonname){
işlemler
}
}
yazım hatalatı olabilir mobilden yazdım mantık budur
bu şekilde sonradan eklenen elementler çalışır
jquery click()
methodu çalıştığı anda sayfada bulunan etiketlere tetikleyici atar.
Sonradan eklenenler etkilenmez click()
methodunun tekrar çalışması lazım.
Yalnız sadece son eklenen etiketin seçilip çalışması lazım.
Senin örneğini ele alalım, her yeni eklenen etiketten sonra click()
methodu tekrar çalışırsa eski etiketlere de ek tetikleyici
atanır.
Ve ne kadar kullanırsan o kadar artar.
Her tıkladığında kaç tane yeni etiket oluştu ise o kadar da fonksiyon çalışır.
Ya da @sefaaydin adlı arkadaşımızın önerisi gibi kullanman gerekiyor. Yine de ben iki tane örnek bırakıyorum. Belki ilerde lazım olur.
<button onclick="ekle(2)">Ekle</button>
<table id="table1">
<thead>
<tr>
<th>Programlama Dilleri</th>
<th>Sil</th>
</tr>
</thead>
<tbody>
<tr>
<td>Javascript</td>
<td><button type="button" onclick="sil(1)" data-id="1" class="delete">Sil</button></td>
</tr>
</tbody>
</table>
function ekle(id) {
// Jquery az kod çok iş mantığı ile iç içe kullanacağın etiketleri sadece açmak yetiyor. Kapatmana gerek yok bilgin olsun.
let tr = `<tr>`
tr += `<td>Php`
tr += `<td><button onclick="sil(${id})" data-id="${id}" type="button" class="delete">Sil`
$("#table1 > tbody").append(tr) // Satır eklenir
.find("tr") // Satırlar bulunur
.last() // son satır seçilir
.find(".delete") // son satırdaki .delete sınıfına sahip etiket bulunur
.on("click", (e)=>{ // tetikleyici ve fonksiyonu eklenir
console.log(e.target.dataset["id"])
console.log($(e.target).data("id")) // jquery kullanmak istersen
})
}
Diğer bir seçenek de etiket içinde eklemek.
function ekle(id) {
let tr = `<tr>`
tr += `<td>Php`
tr += `<td><button onclick="sil(${id})" data-id="${id}" type="button" class="delete">Sil`
$("#table1 > tbody").append(tr)
}
function sil(id) {
console.log(id)
}