jQuery $（document）.ready和UpdatePanels？

本文翻译自：jQuery $(document).ready and UpdatePanels?

I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. 我正在使用jQuery将一些鼠标悬停效果连接到UpdatePanel内的元素。 The events are bound in $(document).ready . 事件绑定在$(document).ready 。 For example: 例如：

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

Of course, this works fine the first time the page is loaded, but when the UpdatePanel does a partial page update, it's not run and the mouseover effects don't work any more inside the UpdatePanel. 当然，这在第一次加载页面时工作正常，但是当UpdatePanel执行部分页面更新时，它不会运行，并且鼠标悬停效果在UpdatePanel内部不再起作用。

What's the recommended approach for wiring stuff up in jQuery not only on the first page load, but every time an UpdatePanel fires a partial page update? 在jQuery中连接东西的推荐方法是什么，不仅在第一页加载时，而且每次UpdatePanel都会触发部分页面更新？ Should I be using the ASP.NET ajax lifecycle instead of $(document).ready ? 我应该使用ASP.NET ajax生命周期而不是$(document).ready吗？

---

#1楼

参考：https://stackoom.com/question/14eB/jQuery-document-ready和UpdatePanels

---

#2楼

My answer is based on all the expert comments above, but below is the following code that anyone can use to make sure on each postback and on each asynchronous postback the JavaScript code will still be executed. 我的回答是基于上面的所有专家评论，但下面是以下代码，任何人都可以使用这些代码来确保每次回发和每次异步回发时仍然会执行JavaScript代码。

In my case, I had a user control within a page. 就我而言，我在页面中有一个用户控件。 Just paste the below code in your user control. 只需将以下代码粘贴到您的用户控件中即可。

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

---

#3楼

In response to Brian MacKay's answer: 回应Brian MacKay的回答：

I inject the JavaScript into my page via the ScriptManager instead of putting it directly into the HTML of the UserControl. 我通过ScriptManager将JavaScript注入我的页面，而不是直接将其放入UserControl的HTML中。 In my case, I need to scroll to a form that is made visible after the UpdatePanel has finished and returned. 在我的情况下，我需要滚动到一个在UpdatePanel完成并返回后可见的表单。 This goes in the code behind file. 这包含在代码隐藏文件中。 In my sample, I've already created the prm variable on the main content page. 在我的示例中，我已经在主要内容页面上创建了prm变量。

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;
}

---

#4楼

This worked for me: 这对我有用：

$(document).ready(function() {

    // Do something exciting

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

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

});

---

#5楼

Update Panel always replaces your Jquery with its inbuilt Scriptmanager's scripts after every load. 每次加载后，更新面板总是用其内置的Scriptmanager脚本替换您的Jquery。 Its better if you use pageRequestManager's instance methods like this... 如果你使用像这样的pageRequestManager的实例方法，它会更好......

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

it will work fine ... 它会工作得很好......

---

#6楼

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

The pageLoad function is perfect for this case since it runs on the initial page load and every updatepanel async postback. pageLoad函数非常适合这种情况，因为它在初始页面加载和每个updatepanel异步回发上运行。 I just had to add the unbind method to make the jquery work on updatepanel postbacks. 我只需要添加unbind方法，使jquery在updatepanel回发上工作。

http://encosia.com/document-ready-and-pageload-are-not-the-same/ http://encosia.com/document-ready-and-pageload-are-not-the-same/