ASP.Net - Gridview中的Bootstrap Popover

Question

我试过在bootstrap论坛上提交这个，但没有得到任何回应。就javascript而言，我是绿色的。我想要在gridview中单击或鼠标悬停显示数据单元格中的弹出窗口。我正在使用的gridview包装在更新面板中，我认为这可能是我的问题的一部分。

有没有人有一个例子，如何做到这一点偶然？

我的问题是，我可以得到它的工作似乎前10条记录（分页是一次，并显示10）。但是，当我进入任何页面后，它似乎并没有工作。我想知道是否与updatepanel有关，但我不确定。

任何人做了这个或有一个偶然的例子，我可以按照让这个工作？

感谢您的帮助。

代码：

<asp:Panel ID="pnlRefenceList" GroupingText='Reference &nbsp;&nbsp;&nbsp;&nbsp; ' runat="server"> 

         <asp:GridView ID="gvwIllustration" runat="server" CssClass="table table-hover" AutoGenerateColumns="false" PagerStyle-CssClass="pgr" AllowPaging="True" OnPageIndexChanging="gvwIllustration_PageIndexChanging" OnRowDataBound="gvwIllustration_RowDataBound" DataKeyNames="REFERENCE_ID,PART_ID"> 
          <Columns> 
           <asp:BoundField DataField="REFERENCE_ID" HeaderText="ID" SortExpression="REFERENCE_ID" Visible="false" /> 
            <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Reference Number" SortExpression="REFERENCE_ID"> 
             <ItemTemplate> 
              <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("REF_NUMBER") %>'></asp:HyperLink> 
             </ItemTemplate> 
            </asp:TemplateField> 
           <asp:BoundField DataField="REF_SEQ_NUMBER" HeaderText="Sequence #" SortExpression="REF_SEQ_NUMBER" Visible="TRUE" /> 

           <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Part Number" SortExpression="PART_ID"> 
             <ItemTemplate> 
              <asp:HyperLink ID="hypName" runat="server" NavigateUrl="" Text='<%# Eval("PART_NUMBER") %>'></asp:HyperLink> 
             </ItemTemplate> 
            </asp:TemplateField> 
           <asp:BoundField DataField="REF_DESC" HeaderText="Description" SortExpression="REF_DESC" Visible="TRUE" /> 
           <asp:BoundField DataField="LINK_COUNT" HeaderText="Link Count" SortExpression="LINK_COUNT" Visible="TRUE" /> 
           <asp:BoundField DataField="REMARKS" HeaderText="Remarks" SortExpression="REMARKS" Visible="TRUE" /> 
           <asp:BoundField DataField="DISPOSITION" HeaderText="Disposition" SortExpression="DISPOSITION" Visible="TRUE" /> 
           <asp:BoundField DataField="QTY" HeaderText="Quantity" SortExpression="QTY" Visible="TRUE" /> 
           <%--<asp:BoundField DataField="HAS_SERIALS" HeaderText="Has Serials" SortExpression="HAS_SERIALS" Visible="TRUE" />--%> 

           <asp:TemplateField AccessibleHeaderText="Title" HeaderText="Has Serials" SortExpression="HAS_SERIALS"> 
             <ItemTemplate> 
              <a href="#" class="IllustrationGridLink" rel="popover" data-original-title='This is title ao' data-content='junk - data content'><%# Eval("HAS_SERIALS") %></a> 

              <div id="popover_content_wrapper" style="display: none">This is your div content</div> 
    </div> 



              <%--<%# Eval("YourDataContent")%>--%> 
              <%--<asp:HyperLink ID="hypHasSerials" runat="server" NavigateUrl="" Text='<%# Eval("HAS_SERIALS") %>' data-original-title='This is your title ' data-content='junk - data content'>></asp:HyperLink>--%> 
             </ItemTemplate> 
            </asp:TemplateField> 

           <asp:BoundField DataField="ACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Active Date" SortExpression="ACTIVE_DATE" Visible="TRUE" /> 
           <asp:BoundField DataField="INACTIVE_DATE" dataformatstring="{0:MM/dd/yyyy}" HeaderText="Inactive Date" SortExpression="INACTIVE_DATE" Visible="TRUE" /> 
          </Columns> 
         </asp:GridView> 

        </asp:Panel> 

       </div> 
      </div> 
     </div> 

     <script type="text/javascript"> 
      $(function() { 


       $('[rel=popover]').popover({ 
        html: true, 
        content: function() { 
         return $('#popover_content_wrapper').html(); 
        } 

       }); 

      }); 

     </script> 

    </ContentTemplate> 
    <Triggers> 

    </Triggers> 
</asp:UpdatePanel> 

Answer 1

可以提供一个事件代表团目标选择指向这可能会或可能不会使用selector选项存在的元素。

$('body').popover({ 
    html: true, 
    content: function() { 
     return $(this).next().text(); 
    }, 
    selector: '.has-popover' 
}); 

编辑：

看到这个jsFiddle Demo也许这会更有意义。请注意，在添加新行时，它仍然会弹出，因为我添加了selector: '.has-popover'选项集。无论何时创建该元素，这都会为包含.has-popover类的元素添加弹出窗口。

您可以通过动态加载content选项来添加自定义内容，如上图和我的演示中所示。基本上，这是做的是采取当前元素，弹出正在创建$(this)然后遍历到“下一个”元素.next()然后抓住它的文本.text()。

ANOTHER编辑：

我刚刚发现This jsFiddle Demo描述该比我好的....

的“选择”选项基本上可以让你使用jQuery的“上运行工具提示和 popovers '功能，这意味着如果 存在于原始加载的DOM中，则可以允许 动态添加带有正确选择器的HTML，以便将弹出框触发为 。如果没有 选择器选项，则只有存在于初始DOM中的元素才会触发 工具提示;任何动态添加的都不会。