如何單擊鏈接但不重新加載頁面？

Question

我有一個訂購系統，每次您單擊向上或向下箭頭時，它都會在列表的順序中加1或從中刪除1。 每次單擊鏈接時，頁面都會刷新。

有沒有一種方法可以避免刷新，但仍然可以更新並在頁面上顯示新訂單？

我的列表

<div class="row select-order">
    <ol>
        @foreach (var item in Model)
        {
            <li>                    
                    @item.TaskName
                    @if (item.TaskType != (short)OBTaskTypes.SignOn && item.TaskType != (short)OBTaskTypes.Finalize)
                    {

                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder + 1)})"><i class="fa fa-arrow-down"></i></a>
                        <a href="@Url.Action("SetTaskOrder", "OBClientSetupTasks", new { id = item.SetupID, tid = item.TaskID, oldOrder = (short)item.TaskOrder, newOrder = ((short)item.TaskOrder - 1) })"><i class="fa fa-arrow-up"></i></a>
                    }                    
            </li>
        }
    </ol>
</div>

每次單擊其中一個href時，它都會設置順序並刷新。

Answer 1

我真的會再看一次，並確保您需要為此使用錨標記。 也許一個按鈕會更好。 如果必須這樣做，則必須防止發生默認事件。

http://api.jquery.com/event.preventdefault

$('.select-order a').click(function( event ) {
  event.preventDefault();
  // Do other stuff if needed
});

演示： https : //jsfiddle.net/wxddszct