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

Question

当jQuery应用于UpdatePanel中的元素时，当UpdatePanel刷新时，jQuery不会应用于新注入的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()。add_pageLoaded回调实际上是在加载页面DOM并准备好由其他库使用时调用的。

我曾多次遇到这样的问题，即更新面板的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库在每次Asynch回发调用时自动调用。这是MS AJAX库中的内置功能。当然，这也意味着您只能在代码中全局定义一个"pageLoad“事件处理程序。

我最近写了一个客户端框架，它用DOM做了很多聪明的事情，通过MS Ajax和jQuery并行工作改变了DOM。它考虑了竞争条件，DOM元素的可用性，各种事件处理程序的初始化和处置等。如果你喜欢，我很乐意分享它。

Answer 2

            with(Sys.WebForms.PageRequestManager.getInstance()  ) {
                add_beginRequest(onBeginRequest);
                add_endRequest(onEndRequest);
            }

            function onBeginRequest(sender, args) {
         //       $.blockUI({ message: "<h3>.منتظر باشید</h3>  IranFairCo.com",overlayCSS:     { backgroundColor: '#00f' }});
            }

            function onEndRequest(sender, args) {
           //     $.unblockUI();
            }