ASP.NET Core MVC中AJAX更新HTML后如何重新绑定JS事件？

我有一个ASP.NET Core MVC项目，通过AJAX更新主布局内容。当通过AJAX将divMain的内容替换为User页面的HTML后，User页面中带有datatable-search类的Search按钮无法触发点击事件，想知道是否有方法重新绑定_Layout.cshtml中的JS文件？

项目代码片段 #

_Layout.cshtml #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - Title</title>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
    <script type="text/javascript" src="~/js/site.js" asp-append-version="true"></script>
    <script type="text/javascript" src="~/js/datatables.js" asp-append-version="true"></script>
</head>
<body class="hold-transition sidebar-mini layout-fixed">
    <div id="divMain">
        @RenderBody()
    </div>
</body>
</html>

HomeController.cs #

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

Home > Index.cshtml #

@{ 
    ViewData["Title"] = "Home";
    Layout = "_Layout";
}

<div class="text-center">
    <h1>Welcome</h1>
</div>

UserController.cs #

public class UserController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
}

User > Index.cshtml #

<div class="text-center">
    <h1>User</h1>
    <button type="button" class="datatable-search">Search</button>
</div>

site.js #

$.ajax({
     type: "GET",
     url: "/User/Index",
    
     success: function (response) {
         $("#divMain").html(response);
     },
     error: function (error) { }
 });

datatables.js #

$(".datatable-search").on("click", function (e) {
    alert("test");
});

问题原因 #

当前datatables.js中的事件绑定是直接绑定在.datatable-search元素上的，这种方式仅能对页面初始加载时已存在的DOM元素生效。通过AJAX动态加载的元素是在事件绑定完成后才生成的，自然不会触发绑定好的点击事件。

不需要重新加载整个JS文件，以下是几种更高效的解决方式：

解决方案 #

方案1：使用事件委托（推荐） #

将事件绑定到页面加载时就存在的静态父元素上（比如#divMain），利用事件冒泡机制处理动态生成元素的事件。修改datatables.js：

// 绑定到静态父元素#divMain，监听其子元素中.datatable-search的点击事件
$("#divMain").on("click", ".datatable-search", function (e) {
    alert("test");
});

无论#divMain内的内容如何通过AJAX更新，只要元素带有.datatable-search类，点击事件都会被触发。

方案2：AJAX成功后手动重新绑定事件 #

将事件绑定逻辑封装成函数，在AJAX请求成功并更新DOM后，手动调用该函数完成重新绑定。

1. 修改datatables.js：

function bindSearchEvents() {
    // 先移除已有绑定，避免重复绑定导致事件多次触发
    $(".datatable-search").off("click").on("click", function (e) {
        alert("test");
    });
}

// 页面初始加载时执行一次绑定
$(function() {
    bindSearchEvents();
});

2. 修改site.js的AJAX回调：

$.ajax({
    type: "GET",
    url: "/User/Index",
    success: function (response) {
        $("#divMain").html(response);
        // AJAX加载完成后重新绑定事件
        bindSearchEvents();
    },
    error: function (error) { }
});

方案3：返回PartialView而非完整View #

让UserController的Index方法返回PartialView，这样返回的内容不包含布局代码，减少冗余，同时配合上述事件绑定方式使用。修改UserController.cs：

public class UserController : Controller
{
    public IActionResult Index()
    {
        return PartialView();
    }
}

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