jQuery $（document）.ready和UpdatePanels？

Question

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

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

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

不仅在首页加载时，而且在每次UpdatePanel触发部分页面更新时，建议在jQuery中进行接线的推荐方法是什么？我应该使用ASP.NET
ajax生命周期来代替$(document).ready吗？

Answer 1

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)因此您可以查看引发该事件的原因，并仅在需要时重新绑定。

这是来自Microsoft的文档的最新版本：msdn.microsoft.com/…/bb383810.aspx

根据您的需求，您可能有一个更好的选择是使用jQuery
.on()。这些方法比每次更新都重新订阅DOM元素更为有效。但是，在使用此方法之前，请先阅读所有文档，因为它可能会满足您的需求，也可能无法满足您的需求。有很多jQuery插件无法重构为使用.delegate()或.on()，因此在这种情况下，最好重新订阅。