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

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

当然,这在页面第一次加载时工作得很好,但是当UpdatePanel进行部分页面更新时,它不会运行,鼠标悬停效果在UpdatePanel内部也不再工作。

在第一个页面加载时,以及每次UpdatePanel触发部分页面更新时,建议使用什么方法来连接jQuery中的内容?我应该使用ASP。NET ajax生命周期代替$(document).ready?


当前回答

Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}

其他回答

<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>

我也遇到过类似的问题,发现最好的方法是依靠事件冒泡和事件委托来处理它。事件委托的好处是,一旦设置好,就不必在AJAX更新后重新绑定事件。

我在代码中所做的是在更新面板的父元素上设置一个委托。更新时不会替换此父元素,因此事件绑定不受影响。

有很多很好的文章和插件可以用jQuery处理事件委托,这个特性很可能会加入到1.3版本中。我用来参考的文章/插件是:

http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery

一旦您理解了发生了什么,我认为您会发现这是一个更优雅的解决方案,比每次更新后都记得重新绑定事件更可靠。这还有一个额外的好处,即在卸载页面时为您提供一个可以解绑定的事件。

使用下面的脚本并相应地更改脚本正文。

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>

函数pageLoad()在这种情况下使用非常危险。您可以将事件连接多次。我也会远离.live(),因为它附加到文档元素,并且必须遍历整个页面(又慢又糟糕)。

迄今为止我见过的最佳解决方案是在更新面板之外的包装器上使用jQuery .delegate()函数并使用冒泡。除此之外,您还可以使用Microsoft的Ajax库来连接处理程序,该库旨在与UpdatePanels一起工作。

升级到jQuery 1.3并使用:

$(function() {

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

});

注:现场工作与大多数事件,但不是所有。在文档中有一个完整的列表。