PageRequestManager.getInstance().add_endRequest 的 UpdatePanel 包装器中的 jQuery

Question

当 jQuery 应用于 UpdatePanel 中的元素时，当 UpdatePanel 刷新时，jQuery 不会应用于新注入(inject)的 HTML。

此问题已通过使用解决

Sys.WebForms.PageRequestManager.getInstance().add_endRequest()

注册一个在 AJAX 请求完成时调用的函数:

我编写了一个函数，该函数使用 add_endRequest 注册该函数，并同时调用它:

Async.RegisterAndRun = function(callback) {
    //register function to be run when an update panel request is complete
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(callback);
    //also run the function right now.
    callback();
};

现在我们需要调用的是

Async.RegisterAndRun(AddFancyjQueryToMyHTML);

或

Async.RegisterAndRun(function(){
    AddFancyjQueryToMyHTML();
    AddMoreFancyjQueryToMyHTML('with', 'args');
});

我的问题是，你能想出一种方法来改进这个吗？目前它可以满足我的需要，而且我永远不需要显式调用 add_endRequest，这很好。

Answer 1

我建议的第一个改进是不要使用 add_endRequest 而是使用 add_pageLoaded()。当页面 DOM 加载并准备好被其他库使用时，实际上会调用 add_pageLoaded 回调。

我多次遇到过更新面板的 DOM 元素最终成为 jQuery 选择器中的幽灵元素的问题。但是，如果您不在 jQuery 选择器中缓存 DOM 元素，即您没有这样做

var myGrid = $(".Grid")

那么你应该没问题，因为在更新面板更新结束后，执行 $(".Grid") 总是会为你提供正确的 DOM 元素。

但是，如果您的问题与与 DOM 元素关联的事件处理程序有关，那么实现此目的的一种简洁方法是将事件处理程序定义为

$("#myVanishingElement").unbind().die().live("event","handler");

这将确保您只需调用此代码一次(而不是在每个 add_endRequest 上)。 jQuery 的实时机制可以自动处理页面中出现和消失的元素。

此方法的主要问题是当您的元素在 Updatepanel 第一次回发之前尚未准备好时。为了解决这个问题，请在 JS 脚本中定义名为 pageLoad 的函数(完全相同)

function pageLoad(sender, e) {
//jQuery event binding goes here.
}

MS Ajax 库将在每次异步回发调用时自动调用此函数。这是 MS AJAX 库中的内置功能。当然，这也意味着您只能在代码中全局定义一个“pageLoad”事件处理程序。

我最近编写了一个客户端框架，它使用 DOM 做了很多巧妙的事情，这些事情通过并行工作的 MS Ajax 和 jQuery 进行了更改。它考虑了竞争条件、DOM 元素的可用性、各种事件处理程序的初始化和处置等。如果您愿意，我很乐意分享。