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

【问题标题】：jQuery .on('click') only works oncejQuery .on('click') 只工作一次
【发布时间】：2016-04-14 16:26:27
【问题描述】：

我正在尝试在<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”），但它只工作一次。不仅如此，当对数据进行排序时，glyphicon 会在约 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');
});

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

【问题讨论】：

th 会在运行时生成吗？
听起来有别的东西在运行。那么什么是更新表？ Ajax 调用 onclick？如果是这样，那就是替换表格......所以这将改变图标，所以听起来你需要弄清楚如何挂钩到那个 Ajax 调用并用这些东西设置图标。
您需要提供更多详细信息。当你点击 TH 时会发生什么其他事情吗？当事件浮出水面时，TH 是否仍然是相同的元素？
@epascarello 我认为你是对的，看起来是 InsertionMode = InsertionMode.Replace 正在取代桌子。
有趣的是，当我只点击图标时，它会在图标之间切换。但是，当我单击整个 <th> 时，它会恢复为“菜单上”图标。如果它被替换，那么理论上它不是同一个元素，对@apokryfos？

标签： jquery ajax asp.net-ajax

【解决方案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');
});

【讨论】：

这可以使函数多次运行，但无论出于何种原因，字形图标在 0.5 秒后仍会恢复为“菜单上”......有什么想法吗？
@whitney 对此我无能为力，因为我不知道@Ajax.ActionLink 做了什么。
@whitney 我不知道 ASP，但只是一个疯狂的猜测，当您单击 th 时，您是否正在执行 AJAX？如果是这样，这意味着您的 AJAX 调用会在大约 0.5 秒后将其还原。