Question

我使用这个jquery datepicker

我在updatePanel中输入了

 <input id="DateMask" type="text" />

和js代码：

function SetD() {
    alert(1);
}

$(document).ready(function () {
    SetD();  
    $("#datepicker").datepicker({
        changeMonth: true,
        changeYear: true
    });
});

但问题是，当我将表单发布到服务器时，我只刷新更新面板，因此刷新后$(document).ready(function ()不起作用，所以我可以从哪里执行我的功能？

Answer 1

您需要在Sys.WebForms.PageRequestManager.add_endRequest事件中重新绑定。请参阅此类似帖子jQuery $(document).ready and UpdatePanels?

Answer 2

要使其工作，您需要在UpdatePanel更新后重新初始化它。您可以使用UpdatePanel函数执行此操作。我还想在此注意，您还需要在UpdatePanel更新之前解除绑定，以避免内存泄漏。

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () {
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker
       InitDatePicker();
    });        

    function InitializeRequest(sender, args) {
       // make unbind to avoid memory leaks.
       $("#datepicker").unbind();
    }

    function EndRequest(sender, args) {
       // after update occur on UpdatePanel re-init the DatePicker
       InitDatePicker();
    }


    function InitDatePicker()
    {
        $("#datepicker").datepicker({
            changeMonth: true,
            changeYear: true
        });    
    }
</script>

几乎相同的问题，但在GridView上：Asp.Net UpdatePanel in Gridview Jquery DatePicker

更新面板，添加更新后有效的功能

2 个答案: