jQuery Dinamik Selectbox Yardım

Merhaba arkadaşlar. Konuyu php bölümüne açtım ama buraya da açma ihtiyacında bulundum.

Aşağıdaki gibi bir uygulamam var. Aliminyum levha yazan seçenek değiştikçe diğer özellikler de dinamik olarak değişiyor. (MySql veritabanı kullanıyorum)



+ seçeneğine tıklandığı zaman aynı öğelerden birer tane daha alıyorum aşağıya.

Fakat birinci seçenek yani (Aliminyum levha) seçeneğini değiştirdim zaman değerlen değişmiyor. İlk seçenekteki değerten hepsi etkileniyor.

Umarım anlatabilmişimdir. Dilerseniz demo da yükleyebilirim.

Javascript kodlarım şu şekilde;

<script type="text/javascript">
$(function(){

	$("#ekle").click(function(){
	$("#icerik").after($("#icerik").html());
	});

			$("select[name=kalite]").hide();
			$("select[name=yuzey]").hide();	
			$("select[name=kaplama]").hide();	
			$("select[name=kalinlik]").hide();	
			$("select[name=en]").hide();
			$("select[name=boy]").hide();
			
$("select[name=cins]").change(function(){	
	
	var id = $(this).val();
	
	if(id != 0){
	
	$.post("boy.php", {"id":id}, function(sonuc){
	
			
			$("select[name=boy]").html(sonuc);

			});		
	
	$.post("en.php", {"id":id}, function(sonuc){
	
			
			$("select[name=en]").html(sonuc);

			});		
	
	$.post("kalinlik.php", {"id":id}, function(sonuc){
	
			
			$("select[name=kalinlik]").html(sonuc);

			});		
	
	$.post("kaplama.php", {"id":id}, function(sonuc){
	
			
			$("select[name=kaplama]").html(sonuc);

			});	
	
	$.post("yuzey.php", {"id":id}, function(sonuc){
	
			
			$("select[name=yuzey]").html(sonuc);

			});		
	
	$.post("kalite.php", {"id":id}, function(sonuc){
	
			
			$("select[name=kalite]").html(sonuc);

			});
	
		}
			$("select[name=kalite]").show();
			$("select[name=yuzey]").show();	
			$("select[name=kaplama]").show();	
			$("select[name=kalinlik]").show();	
			$("select[name=en]").show();
			$("select[name=boy]").show();		
	
	});	
	
});
</script>

Sayfa içeriğindeki kodlarım da şu şekilde;

<div id="icerik">
<select name="cins">

<option value="0">Lütfen Seçiniz</option>
<?php
$cinsler = $vt->tablo("select * from cins order by baslik asc");
foreach($cinsler as $cins){
echo'
<option value="'.$cins->id.'">'.$cins->baslik.'</option>
';
}
?>

</select>


<select name="boy"></select>
<select name="en"></select>
<select name="kalinlik"></select>
<select name="kaplama"></select>
<select name="yuzey"></select>
<select name="kalite"></select></br>
</div>

<div class="buton">
<input type="button" id="ekle" value=" + "/>
<input type="submit" value="Gönder"/>
</div>

Umarım anlatabilmişimdir. Vakit ayıran herkese şimdiden teşekkür ederim.

Çok incelemedim fakat sanırım problemin klasik yaşanan şey.

objelere xxx.click( gibisinden yaptığın event tanımları, DOM'a sonradan (+ işareti olayı, klonlayarak vs) giren elemanlarda işe yaramaz. .click ile gitmek istersen onları yeniden bind etmen gerekir. onun yerine şunu kullanmalısın..:

jQuery live()

$("select[name=cins]").live('change', function(){

@spetsnaz 'ın dediği gibi sonradan eklendiği için elemanlar click algılamıyor live fonksiyonunu kullanman lazım ama jquery versiyonun 1.9 dan fazlaysa live metodu silindi .on fonksiyonunu kullanmalısın

$(document).on("change", "select[name=cins]", function(){
 // kodlar buraya gelicek
});

birde gördüğüm başka bir sorun ise clonladıkdan sonra örneğin $("select[name=boy]") böyle seçmeye çalışırsanız 2 tane olduğu için 2 sini seçer sizin doğru elemanı seçmeniz için index'ini kullanmalısınız onuda
var id = $(this).val();
bunu aldığınız yerde şu şekilde index'inide alın
var index = $(this).index();
daha sonra diğer elementleri seçiyorken
$("select[name=boy]").eq(index)
şeklinde kullanın

evetaynı sorunu bende çok fazla yaşıyorum.. Sorunu Live çözüyor fakat live de jquery yeni versiyonlarında çalışmıyor :S

on() ile değiştirmenizi tavsiye ediyorum.

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+

on() ile sorunumu hallettim. Bir diğer fikir almak istediğim nokta ise bu verileri dizi olarak alıp mail göndermek.

Ben bir örnek yazayım siz doğru derseniz ben tümünü replace edeceğim Çok güzel oldu bu.

Örn:

$(document).on('click', '.alert', function(){
     alert('Oldu mu?');
});

------------ Düzeltme --------------

Evet yukarıdaki örneği test ettim çalıştı.. Teşekkür ediyorum.

Şimdi de Document.ready yenilenmeden tazalenen içerikleri tekrar tetikleyecek mi onu deneyeceğim.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 11:48:40 -->-> Daha önceki mesaj 11:35:54 --

O çok basit,

<form id="abcde" method="post"><div id="icerik">..</div></form>


<script>
$(document).on('submit','#abcde',function(){

  $.ajax({
        type: 'POST',
        url: 'xxx.com/mail/mail.php',
        data: $(this).serialize(),
        dataType: 'json',
        success: function(data){
      			
      			alert('mail gonderildi');  			       		
        		return false;
        }
 }); 

});

</script>

Mail.php

<?php
$msg = $_POST['kalite'].'Kalitesinde, '.$_POST['yuzey'].' Yüzeyine sahip, '.$_POST['en'].' mm ve '.$_POST['boy'].'cm ebatında ürün siparişiniz alınmıştır. Mesela yani :)';
mail('example[MENTION=24702]example[/MENTION].com', 'Başlık', $msg);
?>