ASP.Net - Gridview 中的引导弹出框

Question

我尝试在引导论坛上提交此内容，但没有得到任何回复。就 javascript 而言，我是绿色的。我希望在 gridview 中单击或鼠标悬停数据单元格时显示一个弹出框。我正在使用的 gridview 包含在一个更新面板中，我认为这可能是我的问题的一部分。

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

我的问题是前 10 条数据记录（分页打开，一次显示 10 条）我可以让它看起来工作。但是，当我之后转到任何页面时，它似乎不起作用。我想知道是否与更新面板有关，但我不确定。

有人做过这个，或者有一个我可以遵循的例子来让它工作吗？

感谢您的帮助。

代码：

 <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()。

另一个编辑：

我刚刚找到This jsFiddle Demo，它比我能更好地描述这一点......

“选择器”选项本质上允许您运行工具提示和 使用 jQuery 的 'on' 函数的弹出框，这意味着你可以允许 使用正确的选择器动态添加 HTML 以触发弹出窗口 如果它们存在于最初加载的 DOM 中。没有 选择器选项，只有初始 DOM 中存在的元素才会触发 工具提示；任何动态添加的都不会。