UpdatePanel 异步回发后的 Javascript 事件订阅

Posted 2023-02-22

【中文标题】UpdatePanel 异步回发后的 Javascript 事件订阅

【英文标题】：Javascript event subscription after UpdatePanel async postback

【发布时间】：2011-09-05 11:51:03

【问题描述】：

在 asp.net 页面上异步回发后，jquery 事件处理程序出现问题。 我读了this topic - 这是一个很好的解决方案，但我需要一个单独的函数。 所以我使用jquery masked plugin。

我的 js 代码现在是：

<script type="text/javascript">

jQuery(document).ready(function () 
  var control = $("#txtCustomerPhone");

  InitPhonePattern(this, control);

  var prm = Sys.WebForms.PageRequestManager.getInstance();
  prm.add_endRequest(InitPhonePattern(this, control));
 );

 function InitPhonePattern(sender, args) 
  $(args[0]).mask("[phone]",  completed: 
    function () 
    $('#btnCheckCustomerPhone').click(); 
  );


</script>

如您所见，掩码被初始化了 2 次：在文档 Ready() 上和异步回发之后（在 endRequest() 上）。但是屏蔽插件在异步回发后没有映射。

有人了解问题吗？我将不胜感激！

【参考方案1】：

你代码中的问题是 jQuery(document).ready 在更新面板之后没有运行，所以你需要让你的 endRequest 脱离 jQuery。

试试这个方法：

<script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();    
        prm.add_initializeRequest(InitializeRequest);
        prm.add_endRequest(EndRequest);

        function InitializeRequest(sender, args)       
        

        function EndRequest(sender, args) 
             Init();
        

        jQuery(document).ready(function()Init(););

        function Init()
        
          var control = $("#txtCustomerPhone");
          InitPhonePattern(control);        
        

        function InitPhonePattern(args) 
            $(args[0]).mask("[phone]",  completed: 
            function () 
               $('#btnCheckCustomerPhone').click(); 
            );
        
</script>

【讨论】：

Aristos，谢谢 - 但现在我有以下客户端错误：“未定义系统”

哎呀，为了在上面使用 Sys.WebForms.PageRequestManager，必须放置 ScriptManager - 我在我的问题中修复了代码

【参考方案2】：

我想感谢Aristos 的帮助和正确的方向！ 在你的代码中，我只修复了这个字符串：

jQuery(document).ready(Init);//direct transfer function not work;

所以最终代码如下所示：

<script type="text/javascript">
     var prm = Sys.WebForms.PageRequestManager.getInstance();
     prm.add_endRequest(EndRequest);

     function EndRequest(sender, args) 
         Init();
     

     $(document).ready(function () 
         Init();
     );

     function Init() 
         var control = $('#txtCustomerPhone');
         InitPhonePattern(control);
     

     function InitPhonePattern(args) 
         $(args).mask("[phone]",  completed:
            function () 
                $('#btnCheckCustomerPhone').click();
            
         );
    

</script>