Bootstrap popover插件+ pops /不弹出 [英] Bootstrap popover plugin + pops/does not pop

问题描述

大家好，



环境：

ASP.NET {WebfForms}

VS：2013



我来找你帮助关于Bootstrap Popover;我们在我们的一个页面中实现了这个功能[Master - >内容页面 - > UserControl]按以下方式：

在内容页面：

Hi everyone,

Environment:
ASP.NET {WebfForms}
VS: 2013

I come to you for aid regarding Bootstrap Popover; we implemented this functionality in one of our pages [Master -> Content Page -> UserControl] in the following manner:
In the Content Page:

<script type="text/javascript">

    function pageLoad() {
        if (Sys.WebForms.PageRequestManager.getInstance().get_isInAsyncPostBack()) {
            $(document).ready(function () {
                $('.popper').popover({
                    container: 'body',
                    placement: 'auto',
                    html: true,
                    title: 'Observaciones',
                    content: function () {
                        return $(this).children(':first').html();
                    }
                });
            });
        };
    }

</script>

popper类分配如下（UserControl中的 ）：

The popper class was assigned as follows (in the UserControl):

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObs" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

此方案运作正常;我们的GridView的每一行都按预期运行。 然而，在另一页{Master - > ChildMaster - >内容页面 - > UserControl}它根本不起作用。



只有两个市长差异：

a）Child Master Page，只处理外观&对某一组页面的感觉

b）此类内容页面中UserControl的第二个实例;它显然有自己的名字等。



脚本在内容页面级实现，就像之前一样;和二级用户控件中的类如下：

This scenario works just fine; every row withing our GridView behaves as expected. However, on another page {Master -> ChildMaster -> Content Page -> UserControl} it simply does not work at all.

There are only two mayor differences:
a) The Child Master Page, which only handles look & feel for a certain group of pages
b) A second instance of the UserControl in such content page; which obviously has its very own name, etc.

The script was implemented at Content Page level, just like before; and the class in the secondary user control like this:

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObsAlt" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

所有脚本引用都位于母版页：

All script references are located in the Master Page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我尝试过：



寻找在Firefox的开发人员工具中，我发现这些控件的呈现方式存在微小差异，但忽略了为什么或者是否与问题有关：



工作页面：

What I have tried:

Looking at Firefox's developer tools, I identified a "minor" difference in the way these controls are rendered, but ignore why or if it has something to do with the issue:

Working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" data-original-title="" title=""></div>

非工作页面：

NON-working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover">
</div>

这是我第一次使用这个插件，真的不知道发生了什么。



非常感谢指导。在此先感谢。

This is my first time using this plugin, and really do not know what's going on.

Guidance is much appreciated. Thanks in advance.

推荐答案

（document）.ready（function（）{

(document).ready(function () {

（'。popper'）。popover （{
容器：'body'，
placement：'auto'，
html：true，
title：'Observaciones'，
content：function（）{
return

('.popper').popover({ container: 'body', placement: 'auto', html: true, title: 'Observaciones', content: function () { return

（this）.children（'：first'）。html（）;
}
}）;
}） ;
};
}

< / script>

(this).children(':first').html(); } }); }); }; } </script>

popper类分配如下（UserControl中的 ）：

The popper class was assigned as follows (in the UserControl):

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObs" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

此方案运作正常;我们的GridView的每一行都按预期运行。 然而，在另一页{Master - > ChildMaster - >内容页面 - > UserControl}它根本不起作用。



只有两个市长差异：

a）Child Master Page，只处理外观&对某一组页面的感觉

b）此类内容页面中UserControl的第二个实例;它显然有自己的名字等。



脚本在内容页面级实现，就像之前一样;和二级用户控件中的类如下：

This scenario works just fine; every row withing our GridView behaves as expected. However, on another page {Master -> ChildMaster -> Content Page -> UserControl} it simply does not work at all.

There are only two mayor differences:
a) The Child Master Page, which only handles look & feel for a certain group of pages
b) A second instance of the UserControl in such content page; which obviously has its very own name, etc.

The script was implemented at Content Page level, just like before; and the class in the secondary user control like this:

<asp:TemplateField HeaderText="Observaciones">
    <ItemTemplate>
        <div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" >
            <asp:Label ID="lbObsAlt" runat="server" Text='<%# Eval("Observacion") %>'></asp:Label>
        </div>
    </ItemTemplate>
</asp:TemplateField>

所有脚本引用都位于母版页：

All script references are located in the Master Page:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

我尝试过：



寻找在Firefox的开发人员工具中，我发现这些控件的呈现方式存在微小差异，但忽略了为什么或者是否与问题有关：



工作页面：

What I have tried:

Looking at Firefox's developer tools, I identified a "minor" difference in the way these controls are rendered, but ignore why or if it has something to do with the issue:

Working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover" data-original-title="" title=""></div>

非工作页面：

NON-working Page:

<div style="width: 275px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align:left" class="popper" data-toggle="popover" data-trigger="hover">
</div>

这是我第一次使用这个插件，真的不知道发生了什么。



非常感谢指导。提前致谢。

This is my first time using this plugin, and really do not know what's going on.

Guidance is much appreciated. Thanks in advance.

这篇关于Bootstrap popover插件+ pops /不弹出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！