防止将页面顶部链接点击后

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/