在ajax中加载子页面时，jquery脚本函数未在_layout.cshtml页面中触发

Question

我征求您的宝贵意见来解决问题。

上下文：我的应用程序使用 asp.net core MVC 作为技术堆栈。我已经将客户端排序和各种功能放在 jquery 中。为了使这些函数适用于所有页面，我将这些函数放在 _layout.cshtml 页面中。在页面加载时，它运行良好。但是当搜索结果（通过ajax）填充底层模块中的结果集时。 _layout 页面中的 jquery 函数没有调用。

_layout.cshtml页面中的代码示例如下

<script>
    jQuery(document).ready(function ($) {
        // Use jQuery noConflict to avoid conflicts
        $.noConflict();

        // Make table columns resizable
        $("#mytable th").resizable({
            handles: "e", // Only allow resizing from the right edge
            minWidth: 50, // Minimum column width
            
        });
    });
</script>

mytable 是每个 .cshtml 页面中包含搜索结果的表的 id。因此，如果我有 N 个 .cshtml 页面，其中有 N 个 mytable 和一个 _layout.cshtml。为了使这些客户端功能通用，我将它们放在 _layout 页面中。

在每个页面中填充 mytable 的代码示例是不同的，但作为示例，它是这样的

 $(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();
            }.....
    })

问题陈述： 当搜索结果通过 ajax 填充时，下面的代码在 jQuery(document).ready 内的 _lauout.cshtml 页面中没有响应

$("#fixTable th").resizable({handles: "e", minWidth: 50, // Minimum column width});

感谢和问候 尼兰詹·萨哈

Answer 1

假设这行代码针对表

#mytable

的表容器：

$('.table').html(data); 

并且

data

包含表格

#mytable

...

的 HTML

您正在清除现有表格，因此您需要调整“新标题单元格”的大小。替换 HTML 后，立即再次调用代码来执行此操作：

$(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);

                // Make table columns resizable
                $("#mytable th").resizable({
                            handles: "e", // Only allow resizing from the right edge
                            minWidth: 50, // Minimum column width
                            
                        });
                 
                getPersistentColumn();
            }.....
    })