ASP.NET Core MVC中AJAX加载后_Layout.cshtml的jQuery函数不触发求助

问题核心 #

页面初始加载时，表格列的resizable功能正常，但通过AJAX动态替换表格内容后，新插入的<th>元素无法触发该功能。原因是jQuery(document).ready()仅在初始DOM加载完成后执行一次，AJAX加载的新DOM元素不会触发这个事件，自然不会被初始化resizable。另外注意代码中同时出现#mytable和#fixTable，需确保表格ID与选择器统一，避免选择器匹配失败。

解决方案 #

1. 封装Resizable初始化函数 #

把resizable的初始化逻辑抽成独立函数，既可以在页面初始加载时调用，也能在AJAX请求成功后重新调用，为新插入的表格元素绑定功能：

<script>
    // 用自执行函数处理noConflict，避免全局变量污染
    (function($) {
        // 封装初始化函数
        function initTableResizable() {
            // 先销毁已有实例，避免重复绑定导致异常
            $("#mytable th").resizable("destroy").resizable({
                handles: "e",
                minWidth: 50
            });
        }

        // 页面初始加载时执行
        $(document).ready(function() {
            initTableResizable();
        });

        // 将函数暴露到全局，方便AJAX回调调用
        window.initTableResizable = initTableResizable;
    })(jQuery);
</script>

2. 在AJAX成功回调中触发初始化 #

修改页面中的AJAX代码，在替换表格内容后调用全局初始化函数：

$(document).on('click', '#btnProjects', function () {
    $.ajax({
        type: 'GET',
        url: '/Project/GetProjects?Factoryid=' + fId,
        contentType: 'application/json; charset=utf-8',
        success: function (data) {
            if (data.length > 0) {
                $('.table').html(data); 
                getPersistentColumn();
                // 新增：为新表格初始化resizable功能
                initTableResizable();
            }
            // ...其他业务逻辑
        }
    })
});

3. 额外注意事项 #

• 统一表格ID：检查页面中实际表格的ID，确保和脚本中的选择器（如#mytable）完全一致，否则选择器无法匹配元素，功能不会生效。
• 避免重复绑定：每次初始化前执行resizable("destroy")，防止多次绑定导致的功能异常。
• 规范noConflict用法：用自执行函数包裹代码，传入jQuery作为参数，内部用$代替，既避免冲突又保证代码简洁。

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