无法从后面的代码调用引导弹出窗口答案

【问题标题】：not able to call bootstrap popup from code behind无法从后面的代码调用引导弹出窗口
【发布时间】：2016-04-21 13:02:48
【问题描述】：

我试图从后面的代码中调用引导弹出窗口。这是我的html

<head runat="server">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="scripts/Jquery-2.1.4.js"></script>
<script src="scripts/bootstrap-min.js"></script>
 <script>
    function openModel() {
        $("[data-toggle=popover]").popover({
            html: true,
            content: function() {
                return $('#popover-content').html();
            }
        });
    }

</script>
</head>
<body>

<form id="form1" runat="server">
    <div>
        <asp:Button runat="server" OnClick="OnClick" Text="sd"/>
    </div>

    <div class="container">
        <div id="popover-content" class="hide">

        <div class="form-group"> 
          <asp:Label runat="server" id="lblDescription"></asp:Label>
        </div>

        </div>

    </div>

 </form>

</body>

这是我调用弹出窗口的代码

protected void OnClick(object sender, EventArgs e)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModel();", true);
    }

但是当我点击按钮时没有任何反应。我也没有在控制台中看到任何错误。我做错了什么？

【问题讨论】：

你为什么要从代码后面启动它？为什么不在客户端从 JavaScript 启动它？
因为从代码后面做是有原因的。它在 Js 中很容易，我知道但做不到

标签： c# jquery asp.net twitter-bootstrap

【解决方案1】：

确保您的选择器正确

目前看来，您的活动选择器不会针对任何对象。选择器$("[data-toggle=popover]") 将定位data-toggle 属性设置为“popover”的元素，但是我在您的标记上看不到任何与此匹配的内容。

可能的比赛条件

此类问题通常是由于竞争条件导致在您的其他内容（即 jQuery 和 Bootstrap）尚未准备好之前调用 openModel() 函数。

您可以尝试通过添加显式延迟来使用setTimeout() 函数调用您的函数来解决此问题：

ScriptManager.RegisterStartupScript(this, GetType(), "Pop", "setTimeout(function(){ openModel();},10);", true);

如果您仍有问题，请考虑在浏览器中使用开发者工具 (F12) 并检查以确保控制台或网络选项卡中没有错误。

确保您的参考资料正确（并且在正确的位置）

如果你注意到你的 jQuery 或 Bootstrap 库没有被正确加载，你可以考虑利用 ResolveUrl() 方法，它允许你传入一个相对 URL，它会返回对应的绝对 URL给它：

<script src="<%= ResolveUrl("~/scripts/Jquery-2.1.4.js") %>"></script>
<script src="<%= ResolveUrl("~/scripts/bootstrap-min.js") %>"></script>

这通常有助于确保您检索到正在查找的文件。

您还可以考虑将 <script> 标签放在标记的结束 </body> 元素附近，以确保在加载所有之前的内容之前不会调用它们：

        <!-- Form Contents -->
    </form>
    <script src="<%= ResolveUrl("~/scripts/Jquery-2.1.4.js") %>"></script>
    <script src="<%= ResolveUrl("~/scripts/bootstrap-min.js") %>"></script>
</body>

【讨论】：

我试过但同样的问题。控制台没有错误。我已经重新检查了
我添加了一些其他可能适用的解决方案。您可能想重温其中的一些。