bootstrap模态表单无法在智能手机上编辑

Question

我有一个模态窗口可以在笔记本电脑上正常工作.. 在智能手机上，只要我点击任何输入字段（进行编辑），模态就会消失，页面会重新加载...... 是什么导致了这种行为？

<div class='modal fade my_modal' id='edit-member-container' tabindex='-1' role='dialog' aria-hidden='true'>
<div class='modal-dialog'>
<div class='row'>
<div class='col-sm-6 col-centered'>
<form id='contact' action='' method='post'>
   <h3>Edit</h3>
   <fieldset>
   <input placeholder='First Name' type='text' tabindex='1' id='txtFname' value='$first_name'>
   </fieldset>
   <fieldset>
   <input placeholder='Last Name' type='text' tabindex='2' id='txtLname' value='$last_name'>
   </fieldset>
   <fieldset>
   <button type='button' id='btnsaveEdit'>Save Changes</button>
   </fieldset>
</form>
</div><!-- col -->
</div><!-- row -->
</div><!-- dialog -->
</div> <!-- close edit member modal -->

<script>
$(document).on("click","#btnsaveEdit",function(){
    var id_key = $("#id_key").val();
    var  first_name = $("#txtFname").val();
    var  last_name = $("#txtLname").val();
    var value = {
    id_key:id_key,
    first_name:first_name,
    last_name:last_name
    };
 $.ajax(
  {
    url : "http://www.clubsandgroups.com/new-crud/application/member/save_user_edit_member_3.php",
    method: "POST",
    data : value,
    dataType : "JSON",
    success: function(response)
    { ... }
   });   
 });    
</script>