JQuery datepicker() 由 ASP.net 中的 CSS 类动态创建 TemplateFields

Posted 2023-05-08

【中文标题】JQuery datepicker() 由 ASP.net 中的 CSS 类动态创建 TemplateFields

【英文标题】：JQuery datepicker() by CSS class in ASP.net dynamically created TemplateFields

【发布时间】：2017-08-16 05:40:46

【问题描述】：

我在 Gridview 中使用 TemplateFields，它在将记录添加到 Gridview 时动态创建文本框。由于我不能拥有具有相同 ID 的 ASP 控件，因此我不能对这些控件使用 ClientIDMode=Static。

<div class="row">
    <div class="col-md-12">
     <div class="form-horizontal">
      <div class="control-group">
        <asp:Panel ID="pnlDevMembers" runat="server" Height="100%" ScrollBars="None" Visible="true" Width="100%">
          <asp:GridView ID="grdDevSignoffs" runat="server" OnRowCommand="grdDevSignoffs_RowCommand" AutoGenerateColumns="false" CssClass="table-striped" cellspacing="30" GridLines="None" CellPadding="10" RowStyle-Height="40px" HorizontalAlign="Center" BorderStyle="None">

            <Columns>
            <asp:BoundField HeaderText="Event" DataField="desc" ControlStyle-Width="100px"  />
            <asp:TemplateField ControlStyle-BorderStyle="None"  ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" HeaderText="&nbsp;&nbsp;&nbsp;Name">
             <ItemTemplate>
           <div style="padding-left: 10px; padding-right: 10px;"><%#Eval("Lastname")%>, <%#Eval("FirstName")%></div>
           </ItemTemplate>
             </asp:TemplateField>
             <asp:TemplateField HeaderStyle-HorizontalAlign="Center" HeaderText="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Signoff Date" HeaderStyle-BorderStyle="None" HeaderStyle-BorderWidth="0px" ControlStyle-Width="100px" 
                                            ItemStyle-HorizontalAlign="Center">
                                            <ItemTemplate>
                                               <asp:textbox ID="txtDevDate" runat="server" Text='<%# Bind("SignOffDate") %>' CssClass="form-control input-sm datepick" Width="140" style="margin-left: 20px;margin-right: 20px;"/>
                                            </ItemTemplate>
                                        </asp:TemplateField>
             <asp:TemplateField ControlStyle-BorderStyle="None"  ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
                    <ItemTemplate>
                          <asp:LinkButton ID="btnSignoffDevUser" runat="server" CssClass="btn btn-small btn-success" CommandName="signoffRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-ok"></i> Signoff</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp                            
                 </ItemTemplate>                    
               </asp:TemplateField>

                  <asp:TemplateField ControlStyle-BorderStyle="None"  ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center">
                  <ItemTemplate>
                 <asp:LinkButton ID="btnUndoSignoffDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="UndoRecordSignoff" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-remove"></i> Undo Signoff</asp:LinkButton>&nbsp;&nbsp;&nbsp;&nbsp
                 </ItemTemplate>
                </asp:TemplateField>
               <asp:TemplateField ControlStyle-BorderStyle="None"  ControlStyle-BorderColor="Transparent" ItemStyle-HorizontalAlign="Center" >
                    <ItemTemplate>
                          <asp:LinkButton ID="btnRemoveDevUser" runat="server" CssClass="btn btn-small btn-danger" CommandName="removeRecord" CommandArgument="<% CType(Container,GridViewRow).RowIndex %>"><i class="glyphicon glyphicon-minus"></i></asp:LinkButton>
                 </ItemTemplate>
               </asp:TemplateField>
            </Columns>
          </asp:GridView>
        </asp:Panel>
        </div>
      </div>
    </div><!--end rw1col1-->
 </div>

因此，我将 CSS 类“form-control input-sm datepick”分配给这些控件，希望 JQuery 在单击具有这些类的元素时触发 datepicker 函数。但是，由于某种原因，在使用该类时 JS 没有触发。当我针对具有静态 ID 的控件测试相同的脚本时，此方法完美无缺，因此我相当确信它不是 JS 的结构。

<script type="text/javascript">
    $(document).ready(function () 
        $('.form-control input-sm datepick').each(function () 
            $(this).datepicker();
        );
    ); 
</script>

由于 ID 是在运行时生成的，有谁知道我如何将这个日期选择器用于动态创建的字段？

【参考方案1】：

试试这个

$('body').on('focus', function()
    $('.datepick').datepicker();
);​

【讨论】：

我收到一个 Javascript 严重错误：使用您的 sn-p 的字符无效。

【参考方案2】：

这是解决方案：

   $(document).ready(function () 
        $('.datepick').each(function () 
            $(this).datepicker();
        );
    ); 

感谢 javc91 的帮助。您的 $(.datepick) 位让我意识到我只需要包含具有该附加类的项目而不是整个“表单控制输入 sm datepick”类，这导致 JS 不会基于该 CSS 类触发.荣誉。