ASP.NET Core加载分部视图后jQuery代码失效问题排查

我有一个包含信息列表的页面，通过一系列字段结合Ajax实现信息搜索，加载分部视图重新刷新页面信息。但分部视图加载后，所有jQuery代码都失效了，刷新整个页面就正常。相关代码如下：

C# 后端代码 #

public async Task<IActionResult> InvoiceSearch(string CurrentPage, string createDate, int? id,
    int? remoteFactorNumber, string deliverToPhoneNumber, int? statusInvoice)
{
    try
    {
        var branchId = 0;

        if (!User.IsInRole(ConstantRoles.Admin))
        {
            branchId = User.Identity.GetBranchId();
        }

        var invoiceParams = new BranchInvoicesResourceParameters
        {
            PageNumber = !string.IsNullOrEmpty(CurrentPage) ? Convert.ToInt32(CurrentPage) : 1,
            CreateDateTime = createDate?.ToEnglishNumbers() ?? null,
            InvoiceId = id,
            RemoteFactorId = remoteFactorNumber,
            StatusInvoice = statusInvoice == null ? null : (StatusInvoice)statusInvoice,
            DeliverToPhoneNumber = deliverToPhoneNumber?.ToEnglishNumbers() ?? null,
            BranchId = branchId,
        };

        var branchInvoice = await _invoiceService.GetBranchInvoices(invoiceParams);
       
        return PartialView("_BranchInvoiceList", branchInvoice.Data);
    }
    catch(Exception ex)
    {
    }
}

Ajax 调用代码 #

function getSearchInvoice(page) {

    var createDate = $('#searchCreateDate').val();
    var id = $('#searchId').val();
    var remoteFactorNumber = $('#searchRemoteFactorNumber').val();
    var deliverToPhoneNumber = $('#searchDeliverToPhoneNumber').val();
    var statusInvoice = $('#searchStatusInvoice').val();

    var invoice = new Object();
    invoice.createDate = createDate;
    invoice.id = id;
    invoice.remoteFactorNumber = remoteFactorNumber;
    invoice.deliverToPhoneNumber = deliverToPhoneNumber;
    invoice.statusInvoice = statusInvoice;

    $.ajax({
        type: "Get",
        url: "@Url.Action("InvoiceSearch", "Home")",
        headers: {
            "RequestVerificationToken": requestVerificationToken
        },
        data: {
            CurrentPage: page,
            createDate: createDate,
            id: id,
            remoteFactorNumber: remoteFactorNumber,
            deliverToPhoneNumber: deliverToPhoneNumber,
            statusInvoice: statusInvoice
        },
        contentType: "application/json; charset=utf-8",
        dataType: "html",
        success: function (response) {
          
        },
        error: function (xhr, ajaxOptions, thrownError) {
     
    });
};

这是典型的事件委托失效问题：

• 页面初始化时，你写的jQuery事件绑定（比如点击、change事件）是直接绑定到当时DOM中存在的元素上的。
• 通过Ajax加载分部视图后，新渲染出来的列表元素是动态新增的DOM节点，这些节点在页面初始化时不存在，所以之前绑定的事件不会作用在它们身上。
• 刷新整个页面时，所有元素都是重新初始化的，事件绑定会重新作用在所有存在的元素上，所以正常工作。

核心是用事件委托，把事件绑定到一个页面初始化时就存在的父级元素上（比如列表的容器，甚至document），而不是直接绑定到动态元素本身。

举个例子，假设你原来的事件绑定写法是这样：

// 旧写法：直接绑定，动态元素不生效
$('.invoice-item').click(function() {
    // 业务逻辑
});

改成事件委托的写法：

// 新写法：绑定到固定存在的父容器（比如#invoice-container）
$('#invoice-container').on('click', '.invoice-item', function() {
    // 业务逻辑
});

额外注意点：

• 避免每次加载分部视图都重复执行事件绑定代码，否则可能导致事件多次触发，用事件委托可以从根源避免这个问题。
• 确认Ajax成功回调里，是否把返回的HTML正确插入到了页面目标容器中（比如$('#target-container').html(response);），插入位置错误也可能引发异常。

内容的提问来源于stack exchange，提问作者Amir