jQuery $(document).ready 和 UpdatePanels？

小编典典

jQuery $(document).ready 和 UpdatePanels？

all

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

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

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

不仅在第一页加载时，而且每次 UpdatePanel 触发部分页面更新时，在 jQuery 中连接东西的推荐方法是什么？我应该使用 ASP.NET ajax
生命周期而不是$(document).ready?

阅读 128

2022-03-14

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

2022-03-14