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

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

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

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


当前回答

对于在我的情况下的其他人,我试图让jquery文档准备函数为DevExpress ASPxCallbackPanel工作,上面没有(到目前为止)工作。这是对我有效的方法。

<script>
function myDocReadyFunction(){ /* do stuff */  }
</script>

<dx:ASPxCallbackPanel ID="myCallbackPanel" ... >
    <ClientSideEvents EndCallback="function(){ myDocReadyFunction();}"> 
    </ClientSideEvents>
    <PanelCollection ...>
</dx:ASPxCallbackPanel>

其他回答

<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>
pageLoad = function () {
    $('#div').unbind();
    //jquery here
}

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

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

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>

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

FWIW,我在使用mootools时也遇到了类似的问题。重新附加我的事件是正确的举动,但需要在请求结束时完成

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {... 

如果beginRequest导致你得到空引用JS异常,请记住这一点。

干杯

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

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