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

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

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

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


当前回答

jQuery在UpdatePanel中的用户控件

这不是对问题的直接回答,但我确实通过阅读我在这里找到的答案把这个解决方案组合在一起,我想有人可能会觉得它有用。

我试图在用户控件中使用jQuery文本区域限制器。这很棘手,因为用户控件运行在UpdatePanel内部,并且在回调时丢失了绑定。

如果这只是一个页面,这里的答案将直接适用。但是,用户控件不能直接访问head标签,也不能像一些答案假设的那样直接访问UpdatePanel。

我最终把这个脚本块放在我的用户控件的标记的顶部。对于初始绑定,它使用$(document)。准备好了,然后使用prm。add_endRequest从那里:

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

所以…我只是想让某人知道这个方法有用。

其他回答

jQuery在UpdatePanel中的用户控件

这不是对问题的直接回答,但我确实通过阅读我在这里找到的答案把这个解决方案组合在一起,我想有人可能会觉得它有用。

我试图在用户控件中使用jQuery文本区域限制器。这很棘手,因为用户控件运行在UpdatePanel内部,并且在回调时丢失了绑定。

如果这只是一个页面,这里的答案将直接适用。但是,用户控件不能直接访问head标签,也不能像一些答案假设的那样直接访问UpdatePanel。

我最终把这个脚本块放在我的用户控件的标记的顶部。对于初始绑定,它使用$(document)。准备好了,然后使用prm。add_endRequest从那里:

<script type="text/javascript">
    function BindControlEvents() {
        //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
        //Your code would replace the following line:
            $('#<%= TextProtocolDrugInstructions.ClientID %>').limit('100', '#charsLeft_Instructions');            
    }

    //Initial bind
    $(document).ready(function () {
        BindControlEvents();
    });

    //Re-bind for callbacks
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 

    prm.add_endRequest(function() { 
        BindControlEvents();
    }); 

</script>

所以…我只是想让某人知道这个方法有用。

更新面板总是在每次加载后用其内置的Scriptmanager的脚本替换Jquery。如果你像这样使用pageRequestManager的实例方法会更好…

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(onEndRequest)
    function onEndRequest(sender, args) {
       // your jquery code here
      });

它会工作得很好……

升级到jQuery 1.3并使用:

$(function() {

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

});

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

我的回答是基于上面所有专家的评论,但下面是以下代码,任何人都可以使用它来确保在每次回发和每次异步回发时JavaScript代码仍然会被执行。

在我的例子中,我在页面中有一个用户控件。只需将下面的代码粘贴到用户控件中。

<script type="text/javascript"> 
        var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(EndRequestHandler);
    function EndRequestHandler(sender, args) {
        if (args.get_error() == undefined) {
            UPDATEPANELFUNCTION();
        }                   
    }

    function UPDATEPANELFUNCTION() {
        jQuery(document).ready(function ($) {
            /* Insert all your jQuery events and function calls */
        });
    }

    UPDATEPANELFUNCTION(); 

</script>

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

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

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

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

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