GridView行内按钮点击弹出窗口事件在jQuery中无法正常加载求助

我尝试用以下jQuery代码实现GridView内按钮点击弹出窗口的功能，但无法正常工作，求解决思路。

现有代码 #

主页面弹窗触发代码 #

$("[id*=btn_POPUP").click(function () { //this  popup window 
    var GV_VIEW = $(this).closest("tr")[0].rowIndex;
    window.open("Display.aspx?rowIndex=" + GV_VIEW, 'Popup',
'height=400,width=500,resizable=no,left=400,top=200,scrollbars=yes,menu=no');
});

GridView按钮定义 #

<Columns>
    <asp:TemplateField>
        <ItemTemplate>
            <asp:Button ID="btn_POPUP" runat="server" Text="POPUP" CssClass="btn btn-outline-primary" />
        </ItemTemplate>
    </asp:TemplateField>
</Columns>

Display.aspx页面代码 #

JS逻辑

$(function () {
    $(document).ready(function () {
        new Clipboard('.copy-text');
    });
});
$(function () {
    $(document).ready(function () {
        if (window.open != null)
        {
            var GV_details = window.location.href.split("?")[1].split("=")[1];
            var par = $(window.opener.document).contents();
            var row = par.find("[id*=GridView1]").find("tr").eq(GV_details);
            $("#Category").html(row.find("td").eq(1).html());
            $("#Final_Draft").html(row.find("td").eq(2).html());
        }
    });
});

HTML结构

</head> <body>
<form id="form1" runat="server">
    <div>
        <center><h3><b>Category</b></h3> <span id="Category"></span> </center> 
         <hr />
        <b>DRAFT:</b><span id="Final_Draft"></span> <br />
        <a class="copy-text" data-clipboard-target="#Final_Draft" href="#">copy Text</a>
        <hr />
    </div>
</form> </body> </html>

解决步骤 #

1. 修复选择器语法错误 #

原代码中选择器$("[id*=btn_POPUP")缺少闭合方括号，导致无法匹配按钮元素，修正后：

$("[id*=btn_POPUP]").click(function () {
    // 原有逻辑
});

2. 阻止ASP.NET按钮默认回发 #

ASP.NET服务器端按钮点击会触发页面回发，中断弹窗逻辑，需添加阻止默认行为的代码：

$("[id*=btn_POPUP]").click(function (event) {
    event.preventDefault(); // 阻止回发
    var GV_VIEW = $(this).closest("tr")[0].rowIndex;
    window.open("Display.aspx?rowIndex=" + GV_VIEW, 'Popup',
'height=400,width=500,resizable=no,left=400,top=200,scrollbars=yes,menu=no');
    return false; // 双重保险
});

3. 确保DOM加载完成后绑定事件 #

将事件绑定代码放在DOM就绪回调内，避免元素未加载时绑定失败：

$(function() {
    $("[id*=btn_POPUP]").click(function (event) {
        event.preventDefault();
        var GV_VIEW = $(this).closest("tr")[0].rowIndex;
        window.open("Display.aspx?rowIndex=" + GV_VIEW, 'Popup',
'height=400,width=500,resizable=no,left=400,top=200,scrollbars=yes,menu=no');
        return false;
    });
});

4. 优化Display.aspx参数解析逻辑 #

原URL拆分方式在无参数时会报错，改用更安全的参数获取方法：

function getUrlParam(name) {
    return new URLSearchParams(window.location.search).get(name);
}

$(function () {
    $(document).ready(function () {
        new Clipboard('.copy-text');
        
        var rowIndex = getUrlParam("rowIndex");
        if (rowIndex && window.opener) {
            var par = $(window.opener.document).contents();
            var row = par.find("[id*=GridView1] tr").eq(rowIndex);
            $("#Category").html(row.find("td").eq(1).html());
            $("#Final_Draft").html(row.find("td").eq(2).html());
        }
    });
});

5. 修正行索引偏移问题 #

如果GridView包含表头行，rowIndex会把表头算入，导致数据行索引错误，需调整：

var GV_VIEW = $(this).closest("tr")[0].rowIndex - 1; // 减去表头行索引

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