当我的 jQuery UI 日期选择器在初始页面加载时工作正常时，为什么它不能用于回发？

我一直在尝试将 jQuery UI Datepicker 集成到我们的 ASP.NET WebForms 应用程序中。该应用程序使用母版页为所有页面提供共同的外观，并且所有内容页面都构建在 UpdatePanel 的 ContentTemplate 内。我创建了一个用户控件来包装日期选择器的功能，并允许在运行时为代码隐藏中的每个日期设置 minDate、maxDate、验证器等。我还需要处理 ASP.NET 生成客户端元素 ID 的方式。

在过去的一周里，我进行了广泛的搜索，发现了很多让它发挥作用的技巧。这是我现在所处位置的一个稍微简化的版本。

<asp:TextBox ID="txtTB" runat="server"
    MaxLength="10"
    CssClass="dateBox" />

<script type="text/javascript">

    // This function enables the datepicker behavior for this textbox by its ClientID.
    function <%=txtTB.ClientID %>() {
        $("#<%=txtTB.ClientID %>").datepicker({
            changeMonth: true, changeYear: true,
            showOn: 'button',
            buttonImage: "<%=Request.ApplicationPath %>/images/calendarIcon.gif",
            buttonImageOnly: true, buttonText: '', duration: '',
            onSelect: function() { }
        });
    };

    // Register the above function to execute on initial page load...
    $(document).ready(function(){ <%=txtTB.ClientID %>(); }) ;

    // ...and also after any update panel it's on has been refreshed. 
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(<%=txtTB.ClientID %>);

</script>

我省略了验证器和其他一些我认为与该问题无关的标记，但这是用户控件的核心——文本框和启用日期选择器功能的 jQuery 脚本。基本思想是利用 ASP.NET 的客户端 ID 来：

1. 为该特定控件的 JavaScript 函数提供唯一的函数名称
2. 使用 jQuery 注册该函数以在初始页面后启用日期选择器 加载
3. 向 ASP.NET 的 PageRequestManager 注册相同的函数，以在回发后保持启用日期选择器

第 1 项和第 2 项效果很好。但是，回发后，日期选择器功能丢失，只剩下一个文本框。

可是等等！那不是全部。给定页面由多个面板组成，一次只能看到其中一个面板。仅通过使当前面板的 Visible 属性为 true 来选择它们。所有其他面板的 Visible 属性均设置为 false。

现在得到这个：第一个面板上的日期选择器（在初始页面加载时显示的日期选择器）按预期工作。第二个面板上的那些就不会出现。返回第一页，日期选择器再次出现。

有人知道我哪里出错了吗？

虽然 $(document).ready() 非常适合一次性初始化例程，但如果您的代码需要在每次部分回发后重新运行，它会让您陷入困境。 jQuery v1.3+ 中添加的 LiveQuery 功能对此有所帮助，但仅适用于有限的功能集。

例如，如果我们想将 jQueryUI 日期选择器添加到前面示例中的 TextBox，该怎么办？将其添加到 $(document).ready() 中会很好用，until发生部分回发。然后，UpdatePanel 的新 TextBox 元素将不再连接日期选择器。

<script type="text/javascript">
  function pageLoad() {
    $('#TextBox1').unbind();
    $('#TextBox1').datepicker(); 
  }
</script>

<asp:ScriptManager runat="server" />

<asp:UpdatePanel runat="server">
  <ContentTemplate>
    <asp:Button runat="server" ID="Button1" />
    <asp:TextBox runat="server" ID="TextBox1" />
  </ContentTemplate>
</asp:UpdatePanel>

上述答案取自以下链接。我已经在我的一个项目中测试并实现了这一点。

http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/ http://encosia.com/2009/03/25/document-ready-and-pageload-are-not-the-same/