jQuery .on('click') 只工作一次

Question

我正在尝试在 <th> 中制作一个字形图标来指示您是按值升序还是降序排序。原来显示的字形是"glyphicon-menu-up".

<table class="table ws-table-list table-hover">
<thead class="hidden-sm hidden-xs">
    <tr>
        <th class='hidden-sm hidden-xs'>
            <span class="glyphicon glyphicon-menu-up"></span>
            @Ajax.ActionLink("Amount", Model.PagedData.ActionMethod, new { pageNumber = Model.Number + 1, sortColumn = "amount", sortAscending = Model.PagedData.SortAscending, previousSortColumn = Model.PagedData.PreviousSortColumn }, new AjaxOptions
                {
                    HttpMethod = "GET",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = Model.PagedData.UpdateTargetId
                })
        </th>
    </tr>
</thead>
...
</table>

我已经让 jQuery on('click') 函数工作（更改为 "glyphicon-menu-down"），但它只工作一次。不仅如此，当数据被排序时，字形会在约 0.5 秒后自动恢复为 "glyphicon-menu-up"。（这可能与@Ajax.ActionLink函数有关吗？）

我已经尝试了我能在这个网站上找到的所有答案，包括 .on、.off、.delegate、e.preventDefault 和这种格式：

$('.ws-table-list').on('click', 'th', function() {
     console.log('click');   // This only runs once in the console
     $('span', this).toggleClass('glyphicon-menu-up glyphicon-menu-down');
});

我确定答案非常简单，但我想我就是不明白。任何帮助将不胜感激。

Answer 1

尝试更改放置事件侦听器的位置：

$('body').on('click', '.ws-table-list th', function() {
     console.log('click');   // This only runs once in the console
     $('span', this).toggleClass('glyphicon-menu-up glyphicon-menu-down');
});

jQuery .on('click') 只工作一次

jQuery .on('click') only works once

ajax

jquery

asp.net-ajax