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

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

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

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


当前回答

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

pageLoad函数非常适合这种情况,因为它在初始页面加载和每次updatepanel异步回发时运行。我只需要添加unbind方法,使jquery工作在updatepanel回发。

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

其他回答

你也可以试试:

<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()是一个ASP。每次在客户端加载页面时执行的NET ajax事件。

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

函数pageLoad()在这种情况下使用非常危险。您可以将事件连接多次。我也会远离.live(),因为它附加到文档元素,并且必须遍历整个页面(又慢又糟糕)。

迄今为止我见过的最佳解决方案是在更新面板之外的包装器上使用jQuery .delegate()函数并使用冒泡。除此之外,您还可以使用Microsoft的Ajax库来连接处理程序,该库旨在与UpdatePanels一起工作。

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()是不合理的,所以在这些情况下,你最好重新订阅。

对于在我的情况下的其他人,我试图让jquery文档准备函数为DevExpress ASPxCallbackPanel工作,上面没有(到目前为止)工作。这是对我有效的方法。

<script>
function myDocReadyFunction(){ /* do stuff */  }
</script>

<dx:ASPxCallbackPanel ID="myCallbackPanel" ... >
    <ClientSideEvents EndCallback="function(){ myDocReadyFunction();}"> 
    </ClientSideEvents>
    <PanelCollection ...>
</dx:ASPxCallbackPanel>