由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類來觸發。榮譽。