jQuery $（document）.ready and UpdatePanels？

javascript jquery asp.net jquery-events asp.net-ajax

2022-08-29 23:09:55

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

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

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

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

答案 1

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

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

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

是一个 javascript 对象，如果页面上有更新面板，则会自动使用该对象。只要 UpdatePanel 在页面上，您就不需要执行上述代码以外的任何操作即可使用它。PageRequestManager

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

以下是微软文档的最新版本：msdn.microsoft.com/.../bb383810.aspx

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

答案 2

<script type="text/javascript">

        function BindEvents() {
            $(document).ready(function() {
                $(".tr-base").mouseover(function() {
                    $(this).toggleClass("trHover");
                }).mouseout(function() {
                    $(this).removeClass("trHover");
                });
         }
</script>

将要更新的区域。

<asp:UpdatePanel...
<ContentTemplate
     <script type="text/javascript">
                    Sys.Application.add_load(BindEvents);
     </script>
 *// Staff*
</ContentTemplate>
    </asp:UpdatePanel>