加载中…
个人资料
小瓶子
小瓶子
  • 博客等级:
  • 博客积分:0
  • 博客访问:99,004
  • 关注人气:13
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
相关博文
推荐博文
谁看过这篇博文
加载中…
正文 字体大小:

解决jQuery配UpdatePanel后第二次执行失效问题

(2012-12-27 09:40:25)
标签:

jquery

updatepanel

it

分类: ASP.NET

ASP.NET 本身提供的 Ajax控件很好用,尤其是UpdatePanel控件应该是很常被使用到的控件之一,先不考虑UpdatePanel会使网页肥大的问题,UpdatePanel的确是可以让开发者很简单的做到异步效果。
但是当在使用jQuery在UpdatePanel上的时后可能会发生以下情形...
我已经绑定UpdatePanel内的Button做触发了,第一次执行是可以跑的,为什么第二次执行却没有反应了呢?
 
为什么呢? 原因就是因为放置于UpdatePanel内的Button控件当UpdatePanel控件内容进行PostBack的时后,再回来的pdatePanel内的Button控件已经不是当初所绑定的那个Button,所以第一次加载时绑定于UpdatePanel内Button控件的Script其实在UpdatePanel更新后就已经失效了,如下:

1. Page Ready > 绑定Script

2. UpdatePanel: Script Button.Click > 点击触发Script的Button (此时有反应)

3. UpdatePanel: Other Button.Click > 点击触发会PostBack的Button

4. UpdatePanel Ready > UpdatePanel 显示更新过后的画面

5. UpdatePanel: Script Button.Click > 点击触发Script的Button (此时已无反应)
 
那要如何解决这个问题呢?  其实只要重新绑定Script就可以了。
以下提供两种方法:

1.在Server端程序执行完成后呼叫 ScriptManager.RegisterStartupScript(Control, Type, String, String, Boolean) 方法重新绑定。
       2.在Client端取得 Sys.WebForms.PageRequestManager.getInstance() 后呼叫 add_endRequest 方法重新绑定。
 
怎么做? 实际方法如下:

 

01.<</code>asp:ScriptManager ID="ScriptManager1" runat="server">
02.<</code>Scripts>
03.<</code>asp:ScriptReference Path="~/Script/jquery-1.8.2.min.js" />
04.</</code>Scripts>
05.</</code>asp:ScriptManager>
06.無包UpdatePanel<</code>br />
07.<</code>asp:Label ID="Label1" runat="server" Text="Label"></</code>asp:Label>
08.<</code>br />
09.<</code>asp:Button ID="Button1" runat="server" Text="GetTime" />
10.<</code>br />
11.<</code>br />
12.有包UpdatePanel<</code>asp:UpdatePanel ID="UpdatePanel1" runat="server">
13.<</code>ContentTemplate>
14.<</code>asp:Label ID="Label2" runat="server" Text="Label"></</code>asp:Label>
15.<</code>br />
16.<</code>asp:Button ID="Button2" runat="server" Text="GetTime"  />
17.<</code>asp:Button ID="Button3" runat="server" onclick="Button3_Click"
18.Text="Other PostBack" />
19.<</code>asp:Button ID="Button4" runat="server" onclick="Button4_Click"
20.Text="Other PostBack + RegisterScript" />
21.</</code>ContentTemplate>
22.</</code>asp:UpdatePanel>

可以看到上面的HTML码中有放了一个正常的Button,并在UpdatePanel中放了另三个Button,UpdatePanel中三个Button分别是:
GetTime: 呼叫Script的按钮
Other PostBack: 正常PostBack按钮 www.it165.net
Other PostBack + RegisterScript: 正常PostBack + 重新注册Script按钮
 
Script:

 

$(function () {
02.init();
03.});
04. 
05.function init() {
06.$("#

0

阅读 评论 收藏 转载 喜欢 打印举报/Report
  • 评论加载中,请稍候...
发评论

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有