jqueryをリロードするページを防止する

Question

ページが完全にロードされていれば、コードは正常に動作しますが、ページがロードモードになっている場合に問題が発生します。

$(document).ready(function(){ 
    $('#myModal').on('show.bs.modal', function (e) { 
    e.preventDefault(); 
    var key = $(e.relatedTarget).data('id'); 
    $('#loadingmessage').show(); 
    $.ajax({ 
     type : 'post', 
     url : 'test.php', 
     data : 'key='+ key, 
     success : function(data) { 
     $('.modal-body').html(data); 
    }, 
    complete: function() { 
     $('#loadingmessage').hide(); 
    } 
    }); 
    return false; 
}); 
}); 

私のHTMLは、ページがロードさcompleteyであると私はAJAX呼び出しがあり、この上でクリックすると正常に動作しますが、ページがロードされたとき、私はclcik場合ページは、私が防ぐ方法を再びリロードを開始し、ここで

<a href='' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a> 

ですそれはリロードする。

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
      <div class="modal-dialog" role="document"> 
       <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
        <h4 class="modal-title" id="myModalLabel">Check Server Status</h4> 
       </div> 
       <div class="modal-body"> 
       <div id="loadingmessage">Checking...</div> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
       </div> 
      </div> 
      </div> 

Answer 1

<a href='#' data-toggle='modal' data-target='#myModal' data-id='1:2:3:4'>UP</a>