jQuery画像をテーブルデータのフルスクリーンでクリックしたとき

Question

私のテーブルに画像があります。 私はjQueryを使ってモーダルフルスクリーンイメージをポップアップ表示しようとしました。 しかし、それだけでテーブルデータの先頭に

この私のコード

<tbody> 
    <tr> 
    <td><?php echo $i++;?></td> 
    <td><?php echo $d['tanggal_komplain'];?></td> 
    <td><?php echo $d['nama_komplainer'];?><?php echo $d['pembuat'];?></td> 
    <td><?php echo $d['departemen_tujuan'];?></td> 
    <td><?php echo $d['personil_tujuan'];?></td> 
    <td><?php echo $d['subject'];?></td> 
    <td><?php echo $d['isi_komplain'];?></td> 
    <td><?php echo $d['status'];?></td> 
    <td class="align-middle text-center perbesar"> 
     <a href="#" id="pop"> 
     <img id="imageresource" src="image/<?php echo $d['nama_gambar']; ?>" width="80" height="80"> 
     </a> 
    </td> 
    </tr> 
</tbody>  
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button> 
     <h4 class="modal-title" id="myModalLabel">Image preview</h4> 
     </div> 
     <div class="modal-body"> 
     <img src="" id="imagepreview" style="width: 400px; height: 264px;" > 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     </div> 
    </div> 
    </div> 
</div> 

<script> 
$("#pop").on("click", function() { 
    $('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link 
    $('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function 
}); 
</script> 

は希望の誰かが私を助けることができることができます：（（

Answer 1

使用preventDefaultがaリンク

`$("#pop").on("click", function(e) { 
    e.preventDefault(); 
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here  asign the image to the modal when the user click the enlarge link 
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned  to the bootstrap modal, then i use the show function 
});` 

を無効にします（または）

削除hrefとpopリンクにtype=buttonを追加... <a type="button" id="pop">...</a>