</div>
</div>
<div class="grid--cell mb0 mt4">
<a href="/questions/8498579/how-does-jquery-work-when-there-are-multiple-elements-with-the-same-id-value" dir="ltr">How does jQuery work when there are multiple elements with the same ID value?</a>
<span class="question-originals-answer-count">
(7 answers)
</span>
</div>
<div class="grid--cell mb0 mt8">Closed <span title="2014-07-09 12:07:29Z" class="relativetime">5 years ago</span>.</div>
</div>
</aside>
$(document).ready(function(){
$('#urun_ekbilgi').click(function() {
var clsnm = $(this).attr('class');
$.ajax({
type: 'POST',
url: 'urun_bilgisi.asp',
data: 'sno='+clsnm,
success: function(ajaxCevap) {
$("#ajaxPage").html(ajaxCevap);
}
});
return false;
});
});
<a id="urun_ekbilgi" class="1">İçerik 1 Getir</a><br>
<a id="urun_ekbilgi" class="2">İçerik 2 Getir</a><br>
<a id="urun_ekbilgi" class="3">İçerik 3 Getir</a><br>
<div id="ajaxPage"></div>
click class="1" work
click class="2" doesnt work ? why !
</div>
When using ID element jquery assume there is only one element to find (as ID should be unique). That is why only the first "a" tag works. Instead you want to use a common class for all "a" tags, as there can be multiple tags with same class.
Something like this should do the trick:
$(document).ready(function(){
$('.urun_ekbilgi').click(function() {
var clsnm = $(this).attr('class');
$.ajax({
type: 'POST',
url: 'urun_bilgisi.asp',
data: 'sno='+clsnm,
success: function(ajaxCevap) {
$("#ajaxPage").html(ajaxCevap);
}
});
return false;
});
});
<a class="urun_ekbilgi">İçerik 1 Getir</a><br>
<a class="urun_ekbilgi">İçerik 2 Getir</a><br>
<a class="urun_ekbilgi">İçerik 3 Getir</a><br>
<div id="ajaxPage"></div>