無法使Bootstrap彈出窗口在PHP中工作

Question

其他一些人也提出了類似的問題，我已經查看了所有答案，但我仍然有些失落。

我正在嘗試在一些PHP生成的html中生成一個popover。 我可以使Popover在JS中正常工作，但是當我嘗試通過PHP動態生成Popover代碼時，它不起作用。

聽起來這與確保在所有內容都已加載到DOM之后加載我的popover代碼有關，但是我已經嘗試了很多排列方式，但是我沒有運氣。 任何幫助將不勝感激。

注意：有人告訴我我確實應該使用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>

Answer 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();
    }
};

無法使Bootstrap彈出窗口在PHP中工作

問題描述

1 個解決方案

解決方案1
0 已采納 2017-11-09 23:04:10

無法使Bootstrap彈出窗口在PHP中工作

問題描述

1 個解決方案

解決方案1 0 已采納 2017-11-09 23:04:10

解決方案1
0 已采納 2017-11-09 23:04:10