jQuery $(document).ready 和 UpdatePanels? [英] jQuery $(document).ready and UpdatePanels?

问题描述

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

I'm using jQuery to wire up some mouseover effects on elements that are inside an UpdatePanel. The events are bound in $(document).ready . For example:

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

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

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 触发部分页面更新时，在 jQuery 中连接东西的推荐方法是什么?我应该使用 ASP.NET ajax 生命周期而不是 $(document).ready 吗?

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? Should I be using the ASP.NET ajax lifecycle instead of $(document).ready?

推荐答案

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

An UpdatePanel completely replaces the contents of the update panel on an update. This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

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

What I've done to work around this is re-subscribe to the events I need after every update. I use $(document).ready() for the initial load, then use Microsoft's PageRequestManager (available if you have an update panel on your page) to re-subscribe every update.

$(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 在页面上，除了上面的代码之外，您不需要执行任何其他操作即可使用它.

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page. You shouldn't need to do anything other than the code above in order to use it as long as the UpdatePanel is on the page.

如果您需要更详细的控制，此事件传递的参数类似于 .NET 事件传递参数的方式 (sender, eventArgs)，因此您可以查看引发事件的原因，并且仅在需要时重新绑定.

If you need more detailed control, this event passes arguments similar to how .NET events are passed arguments (sender, eventArgs) so you can see what raised the event and only re-bind if needed.

以下是 Microsoft 提供的最新版本的文档:msdn.microsoft.com//.../bb383810.aspx

Here is the latest version of the documentation from Microsoft: msdn.microsoft.com/.../bb383810.aspx

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

A better option you may have, depending on your needs, is to use jQuery's .on(). These method are more efficient than re-subscribing to DOM elements on every update. Read all of the documentation before you use this approach however, since it may or may not meet your needs. There are a lot of jQuery plugins that would be unreasonable to refactor to use .delegate() or .on(), so in those cases, you're better off re-subscribing.

这篇关于jQuery $(document).ready 和 UpdatePanels?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！