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

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

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

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


当前回答

我会使用以下方法之一:

将事件绑定封装在函数中,并在每次更新页面时运行它。您总是可以包含到特定元素的事件绑定,这样就不会将事件多次绑定到相同的元素。 使用livequery插件,它基本上自动执行方法一。根据希望对事件绑定的控制程度,您的偏好可能有所不同。

其他回答

升级到jQuery 1.3并使用:

$(function() {

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

});

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

我也遇到过类似的问题,发现最好的方法是依靠事件冒泡和事件委托来处理它。事件委托的好处是,一旦设置好,就不必在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>

我会使用以下方法之一:

将事件绑定封装在函数中,并在每次更新页面时运行它。您总是可以包含到特定元素的事件绑定,这样就不会将事件多次绑定到相同的元素。 使用livequery插件,它基本上自动执行方法一。根据希望对事件绑定的控制程度,您的偏好可能有所不同。

pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

pageLoad函数非常适合这种情况,因为它在初始页面加载和每次updatepanel异步回发时运行。我只需要添加unbind方法,使jquery工作在updatepanel回发。

http://encosia.com/document-ready-and-pageload-are-not-the-same/