jQuery $(document).ready和UpdatePanels?

JavaScript

乐小胖

2020-03-12

我正在使用jQuery在UpdatePanel中的元素上附加一些鼠标悬停效果。事件绑定在中$(document).ready例如:

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

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

不仅在首页加载时,而且在每次UpdatePanel触发部分页面更新时,建议在jQuery中进行接线的推荐方法是什么?我应该使用ASP.NET ajax生命周期来代替$(document).ready吗?

第1335篇《jQuery $(document).ready和UpdatePanels?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
十三小卤蛋凯 2020.03.12

使用以下脚本,并相应地更改脚本的主体。

       <script>
        //Re-Create for on page postbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
           //your codes here!
        });
    </script>
十三JinJin乐 2020.03.12
Sys.Application.add_load(LoadHandler); //This load handler solved update panel did not bind control after partial postback
function LoadHandler() {
        $(document).ready(function () {
        //rebind any events here for controls under update panel
        });
}
路易Green 2020.03.12

每次加载后,“更新面板”始终用其内置的Scriptmanager脚本替换您的Jquery。如果使用像这样的pageRequestManager的实例方法,效果会更好。

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

它将工作正常...

达蒙阳光乐 2020.03.12

我的答案基于上面的所有专家评论,但下面的代码是任何人都可以用来确保在每次回发和每次异步回发中仍将执行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>
Pro神无樱 2020.03.12

这是一个很棒的插件,可用于更新面板:

http://updatepanelplugin.codeplex.com/

路易Stafan 2020.03.12

$(document).ready(function (){...})页面回发后不起作用时,请按如下方式在Asp.page中使用JavaScript函数pageLoad:

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

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

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

如果beginRequest使您获得空引用JS异常,则要记住一点。

干杯

樱飞云泡芙 2020.03.12

这为我工作:

$(document).ready(function() {

    // Do something exciting

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

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

});
老丝猿路易 2020.03.12

在这种情况下使用pageLoad()函数非常危险。您可能使事件多次关联。我还应该远离.live(),因为它附加到document元素上,并且必须遍历整个页面(缓慢而cr脚)。

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

StafanGO 2020.03.12

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

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

有很多不错的文章和插件都可以处理jQuery中的事件委托,并且该功能很可能会集成到1.3版本中。我参考的文章/插件是:

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

一旦您了解了发生的事情,我想您会发现这是一个更加优雅的解决方案,比记住每次更新后重新绑定事件更可靠。这还具有一个额外的好处,即在卸载页面时为您提供一个取消绑定的事件。

JinJin小小 2020.03.12

我将使用以下方法之一:

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

  2. 使用livequery插件,该插件基本上可以自动为您执行方法一。您的首选项可能会有所不同,具体取决于您希望对事件绑定进行控制的程度。

前端古一 2020.03.12
<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>
逆天理查德 2020.03.12

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(),因此在这种情况下,最好重新订阅。

Harry猴子A 2020.03.12

我的答案?

function pageLoad() {

  $(document).ready(function(){

等等

像魅力一样运作,许多其他解决方案惨遭失败。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android