jQuery $（文档）.ready和UpdatePanels？

2018-06-06 06:27:35

我使用jQuery为UpdatePanel中的元素连接一些mouseover效果。事件绑定在$(document).ready 。例如：

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

当然，这在第一次加载页面时可以正常工作，但是当UpdatePanel执行部分页面更新时，它不会运行，并且UpdatePanel中的鼠标悬停效果不再起作用。

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

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)参数(sender, eventArgs)以便您可以查看引发该事件的内容并只在需要时重新绑定。

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

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

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

在UpdatePanel中使用jQuery进行用户控制

这不是对这个问题的直接回答，但是我通过阅读我在这里找到的答案来解决了这个问题，并且我认为有人可能会发现它很有用。

我试图在用户控件中使用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>

所以...只是觉得有人可能会想知道这是有效的。

链接地址: http://www.djcxy.com/p/19529.html

上一篇: jQuery $(document).ready and UpdatePanels?

下一篇: Disabled href tag