javascript — не удается заставить всплывающее окно Bootstrap работать в переполнении стека
Ряд других задавали подобный вопрос, и я посмотрел на все ответы, но я все еще немного растерялся ..
Я пытаюсь сгенерировать всплывающее окно в некоторых HTML-сгенерированных HTML. Я могу заставить popover нормально работать в JS, но когда я пытаюсь динамически генерировать код popover через PHP, он не работает.
Похоже, это как-то связано с тем, чтобы убедиться, что мой popover-код загружен после того, как все загружено в 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>
Решение
Во-первых, почему у вас есть html-упаковка и заголовок в простом php-файле, который просто повторяет кусок html?
Во-вторых, вы должны выполнить popover() Плагин после каждого изменения DOM. Новые элементы, добавленные вызовом ajax, не знают о событиях плагина.
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
$('[data-toggle="popover"]').popover();
}
};
Другие решения
Других решений пока нет …