Ajaxla çağırdığım HTML kodu javascript'te bulamıyorum.

istek61 873 gün önce

467 defa görüntülendi

Şöyle bir sorunum var.

Sayfaya HTML deki şablonu yazınca normal çalışıyor.
- ve + butonları ile inputtaki sayı artıyor ve azalıyor.

ama bu HTML kodu ajax ile aynı yere .html(kod) gibi ekledigimde
HTML aynı şekilde gözüküyor fakat - ve + tuşları herhangi bir fonksiyon göstermiyor
sebebi nedir ?

javascript ready ilk başta sayfayı okudugu için o şekilde mi hazır bekliyor? ajaxtan gelen yeni veriyi görmüyor mu ?
bunu nasıl aşabilirim?

<div id="rows" class="bottomline" data-id="">
<div class="pic"><img src="dosya.jpg" /></div>

<div id="column" class="">
<div class="b9">Ürün Adı</div>
<div>açıklama...</div>
</div>

<div id="column" class="">
<div class="badge1">Stok: 10</div>
<div class="badge2">Fiyat: 20 TL TL</div>

<div class="input-group">
<span class="input-group-btn">
<button type="button" class="minus btn btn-danger btn-number" data-type="minus" data-field="">
<span class="glyphicon glyphicon-minus"></span>
</button>
</span>

<input type="text" id="quantity" name="quantity" class="form-control input-number qy" value="0" data-min="0" data-max="10">

<span class="input-group-btn">
<button type="button" class="plus btn btn-success btn-number" data-type="plus" data-field="">
<span class="glyphicon glyphicon-plus"></span>
</button>
</span>
</div>




</div>

<div id="column" class="">
<button type="button" class="addbtn btn btn-outline">EKLE</button></div>

</div>

$(document).ready(function() {
  	const minus = $('.minus');
  	const plus = $('.plus');
	  
  	minus.click(function(e) {
  	e.preventDefault();
	console.log($(this));
    const input = $(this).closest(".input-group").find(".qy");
	const max = $(this).closest(".input-group").find(".qy").attr("data-max");
	const min = $(this).closest(".input-group").find(".qy").attr("data-min");
    var value = input.val();
	value--;
	if (value < min || value > max) { return; }
	else { input.val(value); }
  	});

  	plus.click(function(e) {
    e.preventDefault();
    const input = $(this).closest(".input-group").find(".qy");
	const max = $(this).closest(".input-group").find(".qy").attr("data-max");
	const min = $(this).closest(".input-group").find(".qy").attr("data-min");
    var value = input.val();
    value++;
	if (value < min || value > max) { return; }
	else { input.val(value); }
  	})
});

Soru hatalı mı? 👎

Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!

Spam olarak işaretle

Cevaplar (6)

abdullahx

872 gün önce

$(function() {
    $(this).on("click", "#test", function(e) {
	    alert("xx")
  	});
});

#008494

istek61

872 gün önce

abdullahx sen nasıl kral bir adamsın :)) 5 saattir çözemediğim sorunu tık diye çözdün.
minnettarım teşekkür ederim.

#008496

istek61

872 gün önce

abdullahx ilgin için teşekkür ederim fakat çalışmıyor.

kodu direkt bu şekilde yazıp çalıştırdığımda hiçbir sorun yok.

 <div id="xx">
     
     <button id="test">buton 1</button>         
     
 </div>

$(function() {
    $("#test").on("click",function(e) {
	    alert("xx")
  	});
});

Fakat xx id'li div'e ajax success den bu kodu gönderdigimde buton ekrana çıkıyor ama click çalışmıyor

data = '<button id="test">buton 1</button>';

$("#xx").show().html(data);

#008493

abdullahx

872 gün önce

Şimdi baştan başlayalım.

$(document).ready(function() {
})

kullanılışı jquery 3.0 dan sonra kaldırıldı bunun yerine

$(function(){
})

kullanımı tavsiye ediliyor.

2.olarak

$(selector).click(function() {})

kullanımı jquery 3.3 den sonra kaldırıldı bunun yerine on metodunu kullanmanız tavsiye ediliyor

$(selector).on("click", function() {})

Şimdi sorununuza gelecek olursak,
sayfaya dinamik olarak yüklenen html kodlarında bir event işlemi dinleyecekseniz bunun için on metodunu biraz daha farklı kullanmanız gerekecek. Aşağıdaki resimde göreceğiniz üzere bu metodun bir kullanım şekli de ikinci parametre olarak seçiciyi girmektir.

Ayrıntılı bilgi

#008490

istek61

872 gün önce

"document" i "bind" edip "click" i dinledigimde
event i şu şekilde çıkıyor

r.Event{originalEvent: PointerEvent, type: 'click', target: button.plus.btn.btn-success.btn-number, currentTarget: document, isDefaultPrevented: ƒ,…}

dün gece 3 den beri bununla ugraşıyorum çözemedim çıldıracam. ne saçma bir sorun

#008489

istek61

873 gün önce

kısacası ajax ile <button id="test">deneme</button> html'ini sayfaya eklediğimizi düşünelim.

$("test").click..... function u bu butonu göremiyor. neden ?

#008487