javascript - jQuery $（document）.ready和UpdatePanels？(jQuery $(document).ready and UpdatePanels?)

Question

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吗？)

  ask by Herb Caudill translate from so

Answer 1

An UpdatePanel completely replaces the contents of the update panel on an update.

(UpdatePanel完全替换更新时更新面板的内容。)

This means that those events you subscribed to are no longer subscribed because there are new elements in that update panel.

(这意味着您订阅的那些事件不再被订阅，因为该更新面板中有新元素。)

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()进行初始加载，然后使用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
});

The PageRequestManager is a javascript object which is automatically available if an update panel is on the page.

(PageRequestManager是一个javascript对象，如果页面上有更新面板，它将自动可用。)

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.

(只要UpdatePanel在页面上，您就不需要执行除上述代码之外的任何操作以便使用它。)

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.

(如果需要更详细的控制，此事件会传递类似于.NET事件传递参数(sender, eventArgs)参数(sender, eventArgs)这样您就可以看到引发事件的内容，并且只在需要时重新绑定。)

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

(以下是Microsoft的最新版本文档： msdn.microsoft.com/.../bb383810.aspx)

---

A better option you may have, depending on your needs, is to use jQuery's .on() .

(根据您的需要，您可能有更好的选择是使用jQuery的.on() 。)

These method are more efficient than re-subscribing to DOM elements on every update.

(这些方法比在每次更新时重新订阅DOM元素更有效。)

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插件，重构使用.delegate()或.on()是不合理的，所以在这些情况下，你最好重新订阅。)