1

我正在处理使用 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 脚本使它仍然被加载到同一页面中?

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

4

1 回答 1

0

当您使用时,UpdatePanel您需要在每次更新时重新初始化与 this 的内容一起工作的 javascript,UpdatePanel这是因为您更改了 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>
于 2012-07-04T07:53:17.673 回答