Javascript jQuery$（document）.准备好并更新了吗？

我使用jQuery在UpdatePanel中的元素上连接一些鼠标悬停效果。事件绑定在

$（document）.ready

中。例如：

$(function() {    
    $('div._Foo').bind("mouseover", function(e) {
        // Do something exciting
    });    
});

当然，这在第一次加载页面时可以正常工作，但是当UpdatePanel执行部分页面更新时，它不会运行，并且鼠标悬停效果在UpdatePanel中不再起作用

---

在jQuery中，不仅在第一次页面加载时，而且在每次UpdatePanel触发部分页面更新时，推荐使用什么方法来连接内容？我是否应该使用ASP.NET ajax生命周期而不是

$（文档）。准备好了吗？

？

我将使用以下方法之一：

将事件绑定封装在函数中，并在每次更新页面时运行它。您可以始终包含对特定元素的事件绑定，以避免将事件多次绑定到同一元素

使用插件，它基本上会自动神奇地执行方法一。您的首选项可能会有所不同，具体取决于您希望对事件绑定拥有的控制量

---

UpdatePanel完全替换更新中更新面板的内容。这意味着您订阅的那些事件不再订阅，因为更新面板中有新元素

我所做的就是在每次更新后重新订阅我需要的事件。我使用

$（document）.ready（）

进行初始加载，然后使用Microsoft（如果页面上有更新面板，则可用）重新订阅每个更新

$(document).ready(function() {
    // bind your jQuery events here initially
});

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

prm.add_endRequest(function() {
    // re-bind your jQuery events here
});

PageRequestManager

是一个javascript对象，如果页面上有更新面板，它将自动可用。只要UpdatePanel在页面上，您就不需要执行上述代码以外的任何操作来使用它

如果需要更详细的控制，此事件传递的参数与.NET事件传递参数的方式类似。

（发送方，eventArgs）

，因此您可以查看引发事件的原因，并仅在需要时重新绑定

以下是Microsoft提供的文档的最新版本：

---

---

根据您的需要，您可能有一个更好的选择，那就是使用jQuery的。这些方法比每次更新时重新订阅DOM元素更有效。但是，在使用此方法之前，请阅读所有文档，因为它可能满足您的需求，也可能不满足您的需求。有很多jQuery插件重构为使用

.delegate（）

或

.on（）

是不合理的，因此在这些情况下，您最好重新订阅。

我也遇到了类似的问题，发现最有效的方法是依靠事件冒泡和事件委派来处理它。事件委派的好处在于，一旦设置完成，就不必在AJAX更新后重新绑定事件

我在代码中所做的是在更新面板的父元素上设置一个委托。更新时不会替换此父元素，因此事件绑定不受影响

jQuery中有许多优秀的文章和插件可以处理事件委派，这一特性很可能会在1.3版本中得到体现。我参考的文章/插件是：

---

一旦您了解了它所发生的情况，我想您会发现这是一个更优雅的解决方案，比每次更新后记住重新绑定事件更可靠。这还有一个额外的好处，即在卸载页面时为您提供一个要解除绑定的事件。

FWIW，我遇到了一个与mootools类似的问题。重新附加我的事件是正确的举动，但需要在请求结束时完成

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {... 

如果beginRequest导致您获得空引用JS异常，请记住这一点

干杯

函数BindEvents（）{
$（文档）.ready（函数（）{
$（“.tr base”）.mouseover（函数（）{
$（this.toggleClass（“trHover”）；
}).mouseout（函数（）{
$（this.removeClass（“trHover”）；
});
}

将要更新的区域

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>

---

升级到jQuery 1.3并使用：

$(function() {

    $('div._Foo').live("mouseover", function(e) {
        // Do something exciting
    });

});

---

注意：live可以处理大多数事件，但不是所有事件。在更新面板中有一个完整的列表。

用户控件和jQuery

这并不是对这个问题的直接回答，但我确实通过阅读我在这里找到的答案将这个解决方案组合在一起，我想有人可能会发现它很有用

我试图在用户控件内使用jQuery textarea限制器。这很棘手，因为用户控件在UpdatePanel内运行，并且在回调时会丢失其绑定

如果这只是一个页面，这里的答案会直接应用。但是，用户控件既不能直接访问head标签，也不能像一些答案所假设的那样直接访问UpdatePanel

最后，我将此脚本块放在用户控件标记的顶部。对于初始绑定，它使用$（document）.ready，然后从那里使用prm.add_endRequest：

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

函数BindControlEvents（）{
//jQuery被包装在BindEvents函数中，因此可以在每次回调后重新绑定它。
//您的代码将替换以下行：
$（'#'）.limit（'100'，'#charsLeft#u指令'）；
}
//初始绑定
$（文档）.ready（函数（）{
BindControlEvents（）；
});
//为回调重新绑定
var prm=Sys.WebForms.PageRequestManager.getInstance（）；
prm.add_endRequest（函数（）{
BindControlEvents（）；
}); 

所以…我想有人可能想知道这是可行的。

你也可以试试：

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

函数pageLoad（）{
$（'div.'u Foo'）.bind（“mouseover”，函数（e）{
//做一些令人兴奋的事
});
}

，因为pageLoad（）是一个

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

function pageLoad() {

  $(document).ready(function(){

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

private void ShowForm(bool pShowForm) {
    //other code here...
    if (pShowForm) {
        FocusOnControl(GetFocusOnFormScript(yourControl.ClientID), yourControl.ClientID);
    }
}

private void FocusOnControl(string pScript, string pControlId) {
    ScriptManager.RegisterStartupScript(this.Page, this.Page.GetType(), "focusControl_" + pControlId, pScript, true);
}

/// <summary>
/// Scrolls to the form that is made visible
/// </summary>
/// <param name="pControlId">The ClientID of the control to focus on after the form is made visible</param>
/// <returns></returns>
private string GetFocusOnFormScript(string pControlId) {
    string script = @"
    function FocusOnForm() {
        var scrollToForm = $('#" + pControlId + @"').offset().top;
        $('html, body').animate({ 
            scrollTop: scrollToForm}, 
            'slow'
        );
        /* This removes the event from the PageRequestManager immediately after the desired functionality is completed so that multiple events are not added */
        prm.remove_endRequest(ScrollFocusToFormCaller);
    }
    prm.add_endRequest(ScrollFocusToFormCaller);
    function ScrollFocusToFormCaller(sender, args) {
        if (args.get_error() == undefined) {
            FocusOnForm();
        }
    }";
    return script;
}

$(document).ready(function() {

    // Do something exciting

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

    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

});

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>