GridView 分页无法在 ASP.NET 中使用 jQuery

Question

我正在使用使用 jquery ajax 加载的 asp.net 页面。在此页面中，我使用 Gridview 显示值列表，如下所示

<asp:GridView ID="GVPrograms" runat="server" AutoGenerateColumns="false" 
        onrowcommand="GVPrograms_RowCommand" AllowPaging="true" BackColor="#f5f5f5"  BorderColor="#ffffff"
         PageSize="2" OnPageIndexChanging="GVPrograms_PageEventHandler" GridLines="None">
        <Columns>             

            <asp:TemplateField HeaderText="Video">
                    <ItemTemplate>                    

                     <div style="float: left; width: 120px" class="play-video"> 
                         <a href="Program.aspx?id=<%#Eval("ID") %>" id='<%#Eval("ID") %>'>                          
                         <img src='<%# GetUrl(Eval("ID")) %>' width='100' height='100' style="" alt="play" />

                         </a>

                       </div>
 </asp:TemplateField> 
 </Columns>

        </asp:GridView>  

我已经在 PageEventHandler 方法中处理了分页并且工作正常。但是，每当页面首次加载时以及当我单击 gridview 内的任何链接时，都会使用以下脚本加载 Program.aspx 页面

$(".play-video a").click(function () {
              $("#content-placeholder").load(this.href);                
              //alert(this.id);
              return false;
          });

现在，问题是每当我单击下一页（例如第 2 页）并单击任何链接时，Program.aspx 就会显示在新窗口中。那么，如何使用上面的 jquery 脚本使其仍然加载到同一页面中？

我一直在寻找是否有任何解决方法，但找不到任何解决方法。我感谢你的帮助。

Answer 1

当您使用

UpdatePanel

时，您需要在每次更新时重新初始化与此

UpdatePanel

的内容一起使用的 javascript，这是因为您更改了 Dom 结构，并且之前的 javascript 不再工作。

为此，您可以使用 UpdatePanel 提供的功能，您的代码如下：

<script type="text/javascript"> 
    // this is your function that we must call on page load 
    //  and after updatepanel updates.
    function InitMyLink()
    {
      $(".play-video a").click(function () {
        $("#content-placeholder").load(this.href);                
        return false;
      });
    }

    // now I capture the two functions that called when UpdatePanel is updated
    var prm = Sys.WebForms.PageRequestManager.getInstance();    
    prm.add_initializeRequest(InitializeRequest);
    prm.add_endRequest(EndRequest);

    function InitializeRequest(sender, args) {      
    }

    // this is called after update panel completes the update
    function EndRequest(sender, args) {
        InitMyLink();
    }

    // this is called on first page load
    $(document).ready(function() {
      InitMyLink();
    });
</script>