如何在更新面板回发后执行 JavaScript 回调？

Question

我使用 jQuery 提示插件在用户将鼠标悬停在页面的某些元素上时显示帮助提示。

我需要在使用 css 选择器加载页面后注册插件事件。

问题是我正在使用 ASP.NET 更新面板，并且在第一次回发后，提示停止工作，因为更新面板替换了页面内容，但没有重新绑定 javascript 事件。

我需要一种在更新面板刷新其内容后执行 JavaScript 回调的方法，以便我可以重新绑定 JavaScript 事件以使提示再次工作。

有什么办法可以做到这一点吗？

Answer 1

不要将 jQuery 代码放入 $(document).ready() 中，而是将其放入

function pageLoad(sender, args) { 
    ... 
}

pageLoad 中，该代码在每次回发（同步或异步）后执行。 pageLoad 是 ASP.NET AJAX 中为此目的保留的函数名称。 另一方面，$(document).ready() 仅在 DOM 最初准备好/加载时执行一次。

请参阅ASP.NET AJAX 客户端生命周期事件概述

Answer 2

页面加载不起作用。 我用这个代替：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(pageLoaded);

function pageLoaded() {
}

Answer 3

这可能不是最优雅的解决方案，但它仍然是一个解决方案：

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 吗？

Answer 4

如果您想在 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，这非常方便：由更新面板提供。 有些操作需要更多资源，在 pageLoad 上处理整个 DOM 树就显得有些过分了。

Answer 5

使用 pageLoaded 事件并检查是否回调或回发：

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_pageLoaded(function (sender, args) {
    if (args._panelsUpdated && args._panelsUpdated.length > 0) {
        //callback;
    }
    else {
        //postback;
    }
});