当我在 AJAX UpdatePanel 中显示 DatePicker 时，它没有在文本框中触发答案

【问题标题】：DatePicker is not firing in the textbox when I make it visible inside AJAX UpdatePanel当我在 AJAX UpdatePanel 中显示 DatePicker 时，它没有在文本框中触发
【发布时间】：2011-12-25 19:32:53
【问题描述】：

 <asp:ScriptManager ID="ScriptManager1" runat="server">
 </asp:ScriptManager>
      <asp:UpdatePanel ID="UpdatePanel1" runat="server">
         <ContentTemplate>
            <p runat="server">
            <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :"   Height="21px" 
                Width="136px" Visible="False"></asp:Label>
            <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" 
                Visible="False" ViewStateMode="Enabled"></asp:TextBox>
        </p>
         </ContentTemplate>
       </asp:UpdatePanel>

最初加载页面时，上面的文本框不可见。当用户单击其他下拉列表并进行选择时，我使其可见。文本框出现了，但我使用的 Jquery datepicker 没有触发，因为使用 AJAX UpdatePanel 使文本框可见，它的 HTML 没有添加到页面中。

任何指导如何解决它？

我在下面粘贴 Jquery。

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"
    type="text/javascript"></script>
<script type="text/javascript">
    jQuery(function ($) {
        //$("#occurrence_dateTextBox").mask("99/99/9999");
        $("#<%= txtDOA.ClientID %>").datepicker();
        //$(".datepicker").datepicker(); 
 </script>
    });

【问题讨论】：

那么您需要在添加输入时添加日期选择器，而不是在文档准备好时添加。发布你用来加载输入的 js，我们也许可以提供帮助。
这似乎解决了您的问题。您需要在更新面板更新后初始化日期选择器。 stackoverflow.com/questions/1190549/…

标签： jquery asp.net ajax

【解决方案1】：

如果在执行 jQuery 代码时 HTML 元素不是 DOM 的一部分，那么情况确实如此。您可能想要做的是在将 jQuery 代码添加到 DOM 之后将其绑定到元素。看看 jQuery 的 live() 函数。它基本上监视添加到 DOM 的元素并将绑定应用到它们。

由于日期选择器绑定发生在插件内部，您还需要做一件额外的事情来完成这项工作。日期选择器的正常代码行没有 live() 语法。但是，您本质上想要做的是在新添加的元素获得焦点后立即运行插件。（毕竟，在元素获得焦点之前，日期选择器并不是特别有用。）因此，您需要使用 live() 绑定到“焦点”事件。像这样的：

$('#<%= txtDOA.ClientID %>').live('focus', function() {
  $(this).datepicker();
});

【讨论】：

看来 Live 已被弃用，我应该使用 delegate 或 on 如下，$(document).delegate('#','focus', function () { $(this).datepicker(); });但是我仍然需要弄清楚第一部分。

【解决方案2】：

找到并且更简单的解决方法。

如果在面板中包装文本框并在表单加载时将 Panel 设置为 visible=false，然后在 Ajax 部分回发时将其更改为 visible=true，则 Jquery 可以正常使用文本框。

这是我在上面代码中的解决方法。

<asp:Panel ID="Panel1" runat="server" Visible="false">
            <p>
                <asp:Label ID="lblDOA" runat="server" Text="Appointment Date :" Height="21px" Width="136px"
                    Visible="true"></asp:Label>
                <asp:TextBox ID="txtDOA" runat="server" CssClass="fieldz" AutoPostBack="false" Visible="true"
                    ViewStateMode="Enabled"></asp:TextBox>
            </p>
        </asp:Panel>

【讨论】：

【解决方案3】：

您还可以在异步回发后重新绑定日期选择器。 .NET 更新面板会自动调用 pageLoad 函数，这将允许您隐藏和显示多次，而不仅仅是一次。

function pageLoad(){ $("#<%= txtDOA.ClientID %>").datepicker(); }

【讨论】：