v2.5.2
Giriş yap

Jquery ile oluşturduğum buton tepki vermiyor

spleidanger
537 defa görüntülendi

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");
		});
Cevap yaz
Cevaplar (4)
kartal
871 gün önce

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

trsherlock
876 gün önce

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)
}
sefaaydin
876 gün önce

.on ile kullanırsan daha sağlıklı olur.

$(document).on('click', '.butonClassAdi', function(){
// dosomething'
});