无法让 Bootstrap 弹出窗口在 PHP 内工作
Can't get a Bootstrap popover to work within PHP
很多人问过类似的问题,我看了所有的答案,但我还是有点迷茫..
我正在尝试在一些 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>
首先,为什么在一个简单的 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();
}
};
很多人问过类似的问题,我看了所有的答案,但我还是有点迷茫..
我正在尝试在一些 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>
首先,为什么在一个简单的 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();
}
};