由ASP.net中的CSS类实现的JQuery datepicker（）动态创建TemplateFields

Question

我在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> 

所以，我在分配jQuery的将触发日期选择器功能被点击这些类的元素时，希望的CSS类“的形式控制输入-SM datepick”这些控件。但是，由于某些原因，JS在使用这个类时并未触发。这个方法完美地工作，当我测试相同的脚本与一个静态ID控件，所以我相当有信心它不是JS的结构。

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

有谁知道如何使用这个datepicker动态创建字段，因为ID是在运行时生成的吗？

Answer 1

尝试这个

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

Answer 2

这是解决方案：

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

谢谢javc91的帮助。你的$（。datepick）位让我意识到我只需要包含那些额外的类的项目，而不是整个“form-control input-sm datepick”类，这导致JS不能基于那个CSS类来触发。荣誉。