防止將頁面頂部鏈接點擊後

Question

在我的ASP.NET MVC應用5我有這個代碼的局部視圖：

<a href="#" onclick="resendCode()" class="btn btn-link btn-sm">Resend</a> 

在視圖我有resendCode（）功能：

function resendCode() { 

     var newEmail= $('#hdnEmail').val(); 
     $.getJSON("/User/ResendCode", { email: newEmail}, function (data) { 
      showMessage(data.Message); 
     }); 
    }; 

但是這個局部視圖停留在視圖的底部，並且總是在我點擊href鏈接後焦點轉到頁面的頂部。爲什麼會發生這種情況，以及如何預防它？

如果我將<a href標記更改爲<input type="button" onclick="resendCode()" value="Resend" />，它可以很好地工作。

Answer 1

嘗試

<a href="#" onclick="resendCode(); return false;" class="btn btn-link btn-sm">Resend</a> 

防止滾動

Answer 2

嘗試把返回false; 應該避免做他的默認行爲的方法，並不會去錨

function resendCode() { 

     var newEmail= $('#hdnEmail').val(); 
     $.getJSON("/User/ResendCode", { email: newEmail}, function (data) { 
      showMessage(data.Message); 
     }); 
     return false; 
    }; 

Answer 3

你的HTML改爲：

<a href="#" onclick="resendCode(event)" class="btn btn-link btn-sm">Resend</a> 

並將功能定義更改爲：

function resendCode(event) { 
    event.preventDefault(); 

    var newEmail= $('#hdnEmail').val(); 
    $.getJSON("/User/ResendCode", { email: newEmail}, function (data) { 
     showMessage(data.Message); 
    }); 
}; 

注意，我們將'event'對象作爲參數傳遞給在這種情況下將會'點擊'的函數。 然後我們使用jQuery的'preventDefault'方法來防止事件的默認動作。 在您的HTML中，您使用的是href =「＃」，這會導致頁面在用戶單擊鏈接後跳轉到頂部。這可以通過調用jQuery的preventDefault（）來避免。

更多： http://api.jquery.com/event.preventdefault/