无法让 Bootstrap 弹出框在 PHP 中工作答案

【问题标题】：Can't get a Bootstrap popover to work within PHP无法让 Bootstrap 弹出框在 PHP 中工作
【发布时间】：2017-11-09 22:54:06
【问题描述】：

其他一些人问过类似的问题，我已经查看了所有答案，但我还是有点迷茫..

我正在尝试在一些 PHP 生成的 html 中生成一个弹出框。我可以让弹出框在 JS 中正常工作，但是当我尝试通过 PHP 动态生成弹出框代码时，它不起作用。

听起来这与确保我的弹出框代码在所有内容都加载到 DOM 之后加载有关，但我已经尝试了一堆排列，但我没有运气。任何帮助将不胜感激。

注意：有人告诉我我真的应该使用 JQuery 来做很多事情，但我仍在学习，我正在努力实现这一目标.. :)

简化的 HTML 文件：

<script>
    function showUser(p) {
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };

            xmlhttp.open("POST","getuser.php?p=" + p.value,true);
            xmlhttp.send();
            return false;
        }
    $(document).ready(function(){
        $('[data-toggle="popover"]').popover();
    });

</script>
</head>

<body>
<div id="formBox" class="container">
    <form method="POST" onsubmit="return showUser(this.spnd_total)">
        <input id="spnd_total" name="spnd_total" placeholder="10" type="number" autofocus>
        <input type="submit" value="Calculate!">
    </form>
</div>

<div id="txtHint" class="container">
Popover here...
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">This popover works!</a>
</div>

</body>
</html>

简化的 PHP 文件：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<?php

echo "<a href=\"#\" data-toggle=\"popover\" title=\"Popover Header\" data-content=\"Some content inside the popover\">This one does not.</a>";

?>
</body>
</html>

【问题讨论】：

echo "这个没有。";如果可行，试试这个。
不幸的是，这不起作用。不过谢谢！

标签： javascript php html twitter-bootstrap popover

【解决方案1】：

首先，为什么在一个简单的 php 文件中包含 html 包装和标题，它只是回显了一段 html？

其次，您必须在每次 DOM 更改后执行 popover() 插件。由 ajax 调用添加的新元素不知道插件事件。

xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       document.getElementById("txtHint").innerHTML = this.responseText;
       $('[data-toggle="popover"]').popover();
    }
};

【讨论】：

做到了！非常感谢。我永远也想不通..
这个例子非常简单。实际的代码要长得多，并且做了很多其他的事情。我只是想专注于我遇到麻烦的部分。但我可以看到像这样脱离上下文看起来很奇怪。 :) 再次感谢好心的陌生人！
如果有帮助，请用绿色复选标记检查答案是否有帮助。
啊，我正试图为你的答案投票，但我还没有足够的地位。我现在检查了。再次感谢您！