jQuery $(document).ready和UpdatePanels？

Question

我正在使用jQuery将一些鼠标悬停效果连接到UpdatePanel内的元素.事件受到约束$(document).ready.例如:

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

当然,这工作正常第一次加载页面时,但是当在UpdatePanel做局部页面更新,它无法运行,鼠标悬停效果不工作了的UpdatePanel内.

在jQuery中连接东西的推荐方法是什么,不仅在第一页加载时,而且每次UpdatePanel都会触发部分页面更新？我应该使用ASP.NET ajax生命周期而不是$(document).ready吗？

Answer 1

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

我为解决这个问题所做的工作是重新订阅每次更新后我需要的事件.我$(document).ready()用于初始加载,然后使用Microsoft的PageRequestManager(如果页面上有更新面板,则可用)重新订阅每个更新.

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

这PageRequestManager是一个javascript对象,如果页面上有更新面板,它将自动可用.只要UpdatePanel在页面上,您就不需要执行除上述代码之外的任何操作以便使用它.

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

以下是Microsoft的最新版本文档:msdn.microsoft.com/.../bb383810.aspx

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

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

Answer 3

使用jQuery在UpdatePanel内部进行用户控制

这不是这个问题的直接答案,但我确实通过阅读我在这里找到的答案将这个解决方案放在一起,我认为有人可能会觉得它很有用.

我试图在用户控件中使用jQuery textarea限制器.这很棘手,因为用户控件在UpdatePanel内部运行,并且它在回调时失去了绑定.

如果这只是一个页面,这里的答案将直接应用.但是,用户控件无法直接访问head标记,也没有像某些答案所假设的那样直接访问UpdatePanel.

我最终把这个脚本块放到用户控件标记的顶部.对于初始绑定,它使用$(document).ready,然后从那里使用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>

所以...只是想有人可能想知道这是有效的.

Answer 4

升级到jQuery 1.3并使用:

$(function() {

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

});

注意:直播适用于大多数活动,但不是全部.文档中有完整的列表.

Answer 5

你也可以尝试:

<asp:UpdatePanel runat="server" ID="myUpdatePanel">
    <ContentTemplate>

        <script type="text/javascript" language="javascript">
        function pageLoad() {
           $('div._Foo').bind("mouseover", function(e) {
               // Do something exciting
           });
        }
        </script>

    </ContentTemplate>
</asp:UpdatePanel>

,因为pageLoad()是一个ASP.NET ajax事件,每次在客户端加载页面时都会执行该事件.

Answer 6

我的答案？

function pageLoad() {

  $(document).ready(function(){

等等

工作就像一个魅力,其他许多解决方案失败了.

Answer 7

我会使用以下方法之一:

1. 将事件绑定封装在函数中,并在每次更新页面时运行它.您始终可以包含对特定元素的事件绑定,以便不会将事件多次绑定到相同的元素.

2. 使用livequery插件,它基本上可以自动执行方法一.您的偏好可能会有所不同,具体取决于您希望在事件绑定中拥有的控制量.

Answer 8

这对我有用:

$(document).ready(function() {

    // Do something exciting

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

});

Answer 9

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

到目前为止我看到的最好的解决方案是在更新面板外部的包装器上使用jQuery .delegate()函数并使用冒泡.除此之外,您总是可以使用专为UpdatePanels设计的Microsoft Ajax库来连接处理程序.

Answer 10

当$(document).ready(function (){...})后页面后无法正常工作当时使用JavaScript函数页面加载在Asp.page如下:

<script type="text/javascript" language="javascript">
function pageLoad() {
// Initialization code here, meant to run once. 
}
</script>