我正在使用jQuery在UpdatePanel内的元素上连接一些鼠标悬停效果。事件绑定在$(document)中。准备好了。例如:

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

当然,这在页面第一次加载时工作得很好,但是当UpdatePanel进行部分页面更新时,它不会运行,鼠标悬停效果在UpdatePanel内部也不再工作。

在第一个页面加载时,以及每次UpdatePanel触发部分页面更新时,建议使用什么方法来连接jQuery中的内容?我应该使用ASP。NET ajax生命周期代替$(document).ready?


当前回答

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

将要被更新的区域。

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

其他回答

我会使用以下方法之一:

将事件绑定封装在函数中,并在每次更新页面时运行它。您总是可以包含到特定元素的事件绑定,这样就不会将事件多次绑定到相同的元素。 使用livequery插件,它基本上自动执行方法一。根据希望对事件绑定的控制程度,您的偏好可能有所不同。

更新面板总是在每次加载后用其内置的Scriptmanager的脚本替换Jquery。如果你像这样使用pageRequestManager的实例方法会更好…

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

它会工作得很好……

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

为了解决这个问题,我所做的是在每次更新后重新订阅我需要的事件。我使用$(document).ready()进行初始加载,然后使用Microsoft的PageRequestManager(如果您的页面上有更新面板,则可用)重新订阅每次更新。

$(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事件传递参数的方式(sender, eventArgs),所以你可以看到是什么引发了事件,只在需要时重新绑定。

下面是微软提供的文档的最新版本:msdn.microsoft.com/.../bb383810.aspx


根据需要,更好的选择是使用jQuery的.on()。这些方法比每次更新时重新订阅DOM元素更有效。但是,在使用这种方法之前请阅读所有文档,因为它可能满足也可能不满足您的需求。有很多jQuery插件如果要重构为使用.delegate()或.on()是不合理的,所以在这些情况下,你最好重新订阅。

对于布莱恩·麦凯的回答:

我通过ScriptManager将JavaScript注入到我的页面中,而不是直接将它放入UserControl的HTML中。在我的例子中,我需要滚动到UpdatePanel完成并返回后可见的表单。这在文件后面的代码中。在我的示例中,我已经在主内容页上创建了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;
}

我的回答是基于上面所有专家的评论,但下面是以下代码,任何人都可以使用它来确保在每次回发和每次异步回发时JavaScript代码仍然会被执行。

在我的例子中,我在页面中有一个用户控件。只需将下面的代码粘贴到用户控件中。

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