Question

我试图从代码后面调用bootstrap popup。这是我的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);
    }

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

Answer 1

确保选择器正确

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

可能的竞争条件

这样的问题通常可能是因为竞争条件导致在您的其他内容（即jQuery和Bootstrap）未准备好之前调用openModel()函数。

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

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

如果您仍然遇到问题，请考虑在浏览器中使用开发人员工具（F12）并检查以确保控制台或网络标签中没有错误。

确保您的参考文献正确（并且位于正确的位置）

如果您注意到jQuery或Bootstrap库没有正确加载，您可以考虑利用允许传入相对URL的ResolveUrl()方法，它将返回绝对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>

无法从后面的代码调用bootstap弹出窗口

1 个答案: