GridView 上的 jQuery 函数在页面回发后停止工作（鼠标悬停，单击）

Posted 2023-05-09

【中文标题】GridView 上的 jQuery 函数在页面回发后停止工作（鼠标悬停，单击）

【英文标题】：jQuery functions on GridView stop working after PostBack on page (mouseover, click)

【发布时间】：2011-12-26 00:29:07

【问题描述】：

我的所有 jQuery 函数在第一次加载页面时都能正常工作，在我执行回发后，会导致为 GridView 填充行过滤器并根据行过滤器再次绑定网格。我的 GridView 完全由代码构建并呈现为表格。在此 PostBack 之后，鼠标悬停、鼠标悬停和单击我表格中的表格行的功能不再起作用。

我将 jQuery 函数放在 document.ready 函数中。我还注意到在回发之前这被添加到行的 html 中：

<tr jQuery1320916="3">

所以基本上每行末尾都有一个序列 (3) 和一些随机数，前面有 jQuery。回发后，这将从行中删除。

这是我的 jQuery 代码的一部分（第一次点击功能在 PostBack 之后仍然有效，但 GridView 上的功能不再有效）：

 $(document).ready(function()
        //start click function select all
        $('input[id$="SelectDeselectAllBox"]').click(function()            
        //start if
        if($(this).is(':checked'))
           $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',true).closest('tr').addClass('SelectedRow')
        else
            $(this).parent().parent().parent().parent().children().find('input:checkbox').attr('checked',false).closest('tr').removeClass('SelectedRow');
        //end if

        //end click function select all
             );


        //highligth hovered row
             $('table[id^=taskgrid] tbody tr').mouseover(function () 
                 $(this).addClass('HightlightRow');
             ).mouseout(function () 
                 $(this).removeClass('HightlightRow');
             );            

        //end document ready
        );

我错过了什么吗，在此先感谢。

我确实发现jQuery通过这种方法不再找到我的gridview了：

$('table[id^=taskgrid] tbody tr')，如果我填写 taskgrid 的总 ID，那么它确实有效。但这不是我的选择。

    //is everthing checked? start if
 if($(this).parent().find('input:checkbox:not(:checked)').length == 0)
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',true)
    else
    $(this).parent().parent().parent().parent().find('input:checkbox:first').attr('checked',false);
//end if

【问题讨论】：

检查这个问题：***.com/questions/256195/…

我没有在我的解决方案中使用 UpdatePanel，引用该问题的答案：“PageRequestManager 是一个 javascript 对象，如果页面上有更新面板，它将自动可用。”

【参考方案1】：

问题是，您使用的是“开始于”选择器：

$('table[id^=taskgrid] tbody tr')

对于 ASP.NET WebForms 生成的 id，最好使用“结尾”选择器。假设您的 GridView id 是“taskgrid”，请尝试使用以下选择器：

$('table[id$="taskgrid"] tbody tr')

如果您要定位多个表格元素并且“taskgrid”只是 id 的一部分，您可以使用“包含”选择器：

$('table[id*="taskgrid"] tbody tr')

【讨论】：

问题是我在一页上有多个gridviews，gridviews的总数可能不同，我为网格分配了一个由taskgrid_ +网格名称组成的ID（每个都不同网格）。当我偶然发现 $('table[id*="taskgrid"] tbody tr') 时，它会搜索一个 ID 包含 taskgrid 的表。在此之后，鼠标悬停和单击功能确实起作用，但以下用于检查是否选中了单击网格中的所有复选框的功能，检查从该网格视图中选择/取消选择所有复选框。上面的函数我加了。

然后选择 "contains" 选择器 --> $('table[id*="taskgrid"] tbody tr')