Question

this is in a php loop;

echo "<td><a id='gbdetail' href='#gbdetay' data-toggle='modal' onClick='getGBdetay()' class='btn btn-small' data-original-title=' click to see detail ' data-placement='left' rel='tooltip' href2='lookgb.php?gbid=".$wrgb['id']."'>"."<i class='gicon-edit'></i></a></td>";

and this is jquery part;

function getGBdetay()  { 
    $('#gbdetail').click(function(){
        var url = $(this).attr('href2'); 
        $("#gbbody").load(url); 
    }); 
};

it works only for first row, content doesnt loading in other rows. what can cause this?

Edit:

it worked with changing selector. but now it doesnt work on first click. on first click content doesnt loading. after first click it works without problem. why doesnt it working on first click?

    function getGBdetay()  { 
  $('.btn.btn-small.gbdetayl').click(function(){
   var url = $(this).attr('href2');
   $("#gbbody").load(url);
});

 echo "<td><a target='_blank' href='#gbdetay' data-toggle='modal'  onClick='getGBdetay()' class='btn btn-small gbdetayl' data-original-title=' click to see detail ' data-placement='left' rel='tooltip' href2='lookgb.php?gbid=".$wrgb['id']."'>"."<i class='gicon-edit'></i></a></td>";

Answer 1

Because you can only IDs once in the page.

You can give the <a>s the same class instead of the same ID and then you can use that to select all elements on. You have used btn as class so you can do

function getGBdetay()  { 
    $('.btn').click(function(){
        var url = $(this).attr('href2'); 
        $("#gbbody").load(url); 
    }); 
};

Every button will then have this onclick function. It might be needed to add another class or another way to select all links.