当用户将页面上的某些元素悬停时,我正在使用jQuery提示插件来显示帮助提示。
使用CSS选择器加载页面后,我需要注册插件事件。
问题是我使用的是ASP.NET更新面板,并且在第一次回发之后,提示不再起作用,因为更新面板会替换页面内容,但不会重新绑定javascript事件。
我需要一种在更新面板刷新其内容之后执行javascript回调的方法,因此我可以重新绑定javascript事件以使提示再次起作用。
有什么办法吗?
Answers:
与其将jQuery代码放入其中$(document).ready()
,不如将其放入
function pageLoad(sender, args) {
...
}
pageLoad
在每次回发(同步或异步)后执行。pageLoad
是为此目的在ASP.NET AJAX中保留的函数名称。$(document).ready()
另一方面,当DOM最初准备就绪/加载时,仅执行一次。
pageLoad无效。我改用这个:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);
function pageLoaded() {
}
这可能不是最优雅的解决方案,但是仍然是一个解决方案:
public class UpdatePanel : System.Web.UI.UpdatePanel
{
/// <summary>
/// Javascript to be run when the updatepanel has completed updating
/// </summary>
[Description("Javascript to be run when the updatepanel has completed updating"),
Category("Values"),
DefaultValue(null),
Browsable(true)]
public string OnUpdateCompleteClientScript
{
get
{
return (string)ViewState["OnUpdateCompleteClientScript"];
}
set
{
ViewState["OnUpdateCompleteClientScript"] = value;
}
}
protected override void OnPreRender(System.EventArgs e)
{
base.OnPreRender(e);
if(!string.IsNullOrEmpty(this.OnUpdateCompleteClientScript))
Page.ClientScript.RegisterStartupScript(this.GetType(), this.ClientID, string.Concat("Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function(sender, args){for(var panelId in sender._updatePanelClientIDs){if(sender._updatePanelClientIDs[panelId] == '", this.ClientID, "'){", this.OnUpdateCompleteClientScript, "}}});"), true);
}
}
像这样使用它:
<uc:UpdatePanel OnUpdateCompleteClientScript="alert('update complete');">
<!-- stuff in here -->
</uc:UpdatePanel>
当然,您需要在您的webconfig或页面中注册自定义控件才能使用它。
编辑:另外,您是否看过jquery.live?
如果要在加载UpdatePanel之前和之后执行特定操作,则可以进行覆盖BeginPostbackRequest
和EndPostbackRequest
类似操作:
var postbackControl = null;
var updatePanels = null;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginPostbackRequest);
prm.add_endRequest(EndPostbackRequest);
function BeginPostbackRequest(sender, args) {
prm._scrollPosition = null;
postbackControl = args.get_postBackElement();
postbackControl.disabled = true;
updatePanels = args._updatePanelsToUpdate;
// do your stuff
}
function EndPostbackRequest(sender, args) {
// do your stuff
postbackControl.disabled = false;
postbackControl = null;
updatePanels = null;
}
如果您只想处理更新面板提供的HTML,这将非常方便。某些操作需要更多资源,因此在上处理整个DOM树可能会过大pageLoad
。