javascript - 在ajax调用后，如何在部分 View 中将Jquery插件连接到表

我有一个使用局部视图列出表中项目的视图。

主视图
（在div中，它称为部分视图）

<div id="divList">
    @Html.Action("_list")
</div>

部分视图
（显示表中的项目列表，它使用tablesorter插件在客户端对表中的项目进行排序/过滤）

<table id="tblList" class="tablesorter-bootstrap">
    <thead>
        <tr>
            <th>Item Header</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <td>@item.Name</td>
        }
    </tbody>
</table>

Java脚本
在主视图中

<script type="text/javascript">

        $(document).ready(function () {

            $("#tblList").tablesorter({
                theme: 'bootstrap',
                headerTemplate: '{content} {icon}',
                widgets: ['filter']

            });
        });
</script>

我想做的事

在主视图中，我有一些ajax调用。
由于每次进行Ajax调用时都会刷新部分视图，因此tblList表在ajax调用后会失去tablesorter效果。
我了解它失去效果的原因。

在ajax调用之后，有什么方法可以保持tablesorter效果吗？

我尝试了以下方法：


在部分视图中移动了$("#tblList").tablesorter()，但失去了插件效果
在ajax调用后刷新/重新加载主视图。效果很好，但唯一令我困扰的是，要花几秒钟的时间才能看到表格中的插件效果。
我知道$(document).on('click', '#btn', function(){});之类的东西如果只是一个按钮就可以工作，并尝试使用这种方法，但是我不确定我可以用插件做什么...


编辑

正如Shyju所建议的，我添加了以下内容，它完全可以实现我想要的功能，没有任何时间延迟！

function enableTableSort($element)
{
    $element.tablesorter({
        theme: 'bootstrap',
        headerTemplate: '{content} {icon}',
        widgets: ['filter']
    });
}

enableTableSort($("#tblList"));

$(document).on('click', '#btnAction', function() {
    $.ajax({
        url: 'url',
        type: 'POST',
        data: JASON.stringify(list: list),
        contentType: 'application/json',
        success: function (data) {
            $("#divList").html(data);
            enableTableSort($("#tblList"));
        }
    });
});

最佳答案

ajax调用加载新标记后，您需要重新启用插件。

像这样

$(function () {

    function enableTableSort($element) {
        $element.tablesorter({
            theme: 'bootstrap'
        });
    }

    enableTableSort($("#myTable"));

    //Let's say we have button which makes ajax call and reload table
    $("#reloadBtn").click(function (e) {
        e.preventDefault();  // to be safe

        $("#tblContainer").load("@Url.Action("GetList")", function () {
            enableTableSort($("#myTable"));
        });

    });

});

关于javascript - 在ajax调用后，如何在部分 View 中将Jquery插件连接到表，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42864758/