Javascript event subscription after UpdatePanel async postback

I Have a problem with jquery event handler after async postback on asp.net page. I read this topic - it's a good solution, but I need a separate function. So I'm using jquery masked plugin.

My js code now is:

<script type="text/javascript">

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

 开发者_如何学JAVA InitPhonePattern(this, control);

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

 function InitPhonePattern(sender, args) {
  $(args[0]).mask("+7 (999) 999-99-99", { completed: 
    function () {
    $('#btnCheckCustomerPhone').click();} 
  });

}
</script>

As you see mask was initialized 2 times: on document Ready() and after async postback (on endRequest()). But mask plugin is not mapped after async postback.

Someone understands problem? I would be grateful for help!

The problem in your code is that the jQuery(document).ready is not run after the update panel, so you need to make your endRequest out of jQuery.

Try this way:

<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("+7 (999) 999-99-99", { completed: 
            function () {
               $('#btnCheckCustomerPhone').click();} 
            });
        }
</script>

I want so say thanks to Aristos for help and right direction! In your code I fixed only this string:

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

So final code looks like this:

<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("+7 (999) 999-99-99", { completed:
            function () {
                $('#btnCheckCustomerPhone').click();
            }
         });
    }

</script>