Question

 <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>
    });

Answer 1

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

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

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

Answer 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>

Answer 3

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

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

当我在AJAX UpdatePanel中看到它时，DatePicker没有在文本框中触发

3 个答案: