我正在尝试为Messenger应用程序显示弹出窗口。为了进行测试，我创建了一个Dev Dir作为测试页面，并且弹出窗口正确显示并输出。但是在我的实际Web应用程序上，它不会显示或输出。
您可能需要的信息 我使用的按钮
<button type="button" class="btn btn-secondary" id="pop"><img src="https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png" style="height:30px;width:25px;"></button>
处理所有内容的JS脚本
<script>
$(document).ready(function(){
$('#pop').popover({title: "<h5><img src='https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png' style='height:30px;width:25px;'> Giphy Gif <button type='button' class='close' id='closeGui' ><span aria-hidden='true'>×</span></button></h5>", content: "<h4 id='WTD'>Click On The Gif You Want to Send</h4><input id='searchBar' type='text'><button id='queryGiphy'>Search</button></div><div id='container'></div></div>", html: true, placement: "top", trigger: "manual"});
$('#pop').click(function(event) {
$("#pop").popover('toggle');
});
$('#pop').on('shown.bs.popover', function(){
function searchGiphy() {
var NewSearch = $("#searchBar").val();
var search = NewSearch.split(' ').join('+');
console.log('Searching W/ KeyWord:'+search);
$("#searchBar").val('');
$("#searchBar").hide();
$("#queryGiphy").attr("disabled", true);
$("#queryGiphy").hide();
$("#WTD").show();
$("#container").empty();
var xhr = $.get("https://api.giphy.com/v1/gifs/search?q="+search+"&api_key=&limit=5");
xhr.done(function(data) {
for (var i = 0; i < data.data.length; i++){
$("#container").append("<img src='"+data.data[i].images.original.url+"' style='height:200px;width: 250.5px;'>");
}
});
}
$('exampleModalLong').click(function(event){
event.stopPropagation();
});
$("#container").on("click", "img", function (event) {
// var _target = event.target;
var newSrc = $(event.target).attr('src');
alert("<img src='"+newSrc+"'>")
});
$('#closeGui').click(() => {
$("#searchBar").val('');
$("#searchBar").show();
$("#queryGiphy").attr("disabled", false);
$("#queryGiphy").show();
$("#WTD").hide();
$("#container").empty();
});
$('#btnClose').click(() => {
$("#searchBar").val('');
$("#searchBar").show();
$("#queryGiphy").attr("disabled", false);
$("#queryGiphy").show();
$("#WTD").hide();
$("#container").empty();
});
document.getElementById("closeGui").addEventListener("click", () =>{
$("#pop").popover('hide');
});
document.getElementById("queryGiphy").addEventListener("click", () =>{
searchGiphy();
});
$('#searchBar').on('keypress',function(e) {
if(e.which == 13) {
searchGiphy();
}
});
});
});
</script>
完整代码（已修改）
<?php
include_once('Admin Script');
$servername = "localhost";
$username = "";
$password = "";
$dbName ="";
// Create connection
$connection = mysqli_connect($servername, $username, $password,$dbName);
// Check connection
if (!$connection) {
die("Connection failed: " . mysqli_connect_error());
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Reese's Puffs</title>
<link rel="shortcut icon" href="" />
<link rel="stylesheet" href="main.css">
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheey" href="sec/nav-foot.css">
<style>
.navbar{
margin-bottom:0;
border-radius:0;
background-color:#000000;
color:#00EE00;
padding:1% 0;
font-size:1em;
border:0;
}
.navbar-brand{
float:left;
min-height:55px;
}
footer {
width:100%;
background-color:#000000;
padding:3%;
color:#fff;
}
.fab{
color:#D3D3D3;
min-height:20px;
}
.far{
color:#D3D3D3;
min-height:20px;
}
.fas{
color:#D3D3D3;
min-height:20px;
}
a:hover{
color:#29CB12;
}
a{
color:#D3D3D3;
}
.row{
margin-right: 0px;
margin-left: 0px;
}
</style>
</head>
<body>
<div class="flex-container">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="../hub" style="padding: 0;padding-left: 15px;"><img src="" style="height:50px;width:85px;"></a>
</div>
<div class="navbar-right" >
<button type="button" id="sm-back" style="background-color:transparent;border:1px;margin-right:15px;">
<a href="">
<span>←</span>
</a>
</button>
</div>
</div>
</nav><!--Nav Bar END-->
<div class="ChatDisplay " id="MessagesContainer" style="overflow-x: hidden;">
<?php
$sql = "SELECT * FROM `MainChat` ORDER BY `date`";
$result = mysqli_query($connection, $sql);
$resultCheck = mysqli_num_rows($result);
if ($resultCheck > 0){
while($row = mysqli_fetch_assoc($result)){
//Giv class here
if($row['userId'] != $_SESSION['userId']){//id user id do not =
//style accordingly
$newmsg = strtolower($row['msg']);
if(substr($newmsg, 0,5) == '!img:'){
$cmd = substr($row['msg'],5);
echo "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br><img src='" .$cmd."' style='height: 155px;width: 200px;'></div></div><br></div>";
} elseif(substr($newmsg, 0,4) == '!yt:'){
"<div class='row' ><div class='notU pull-left col-12' style='width:50vw;height: fit-content;'><text class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."</text><br><iframe style='width: 100%; height: 25vw;' src='https://www.youtube.com/embed/".substr($row['msg'], 5 + 31)."?autoplay=0&origin=https://z' frameborder='0'allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div><br></div>";
}else {
echo"<div class='row'><div class='notU pull-left row col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br>".$row['msg']." </div></div><br></div>";
}
} else { //if they do
//style accordingly
$newmsg = strtolower($row['msg']);
if(substr($newmsg, 0,5) == '!img:'){
$cmd = substr($row['msg'],5);
echo "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br><img src='" .$cmd."' style='height: 155px;width: 200px;'></div></div><br></div>";
} elseif(substr($newmsg, 0,4) == '!yt:'){
echo "<div class='row'><div class='you pull-right col-12' style='width:50vw; height: fit-content;'><text class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."</text><br><iframe style='width: 100%; height: 25vw;' src='https://www.youtube.com/embed/".substr($row['msg'], 5 + 31)."?autoplay=0&origin=https://' frameborder='0'allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe></div><br></div>";
} else {
echo"<div class='row'><div class='you pull-right row col-4'><div class='SentBy'>Sent by ".$row['userName']." at ".$row['date']."<br>".$row['msg']." </div></div><br></div>";
}
}
}
}
?>
</div>
<div>
<div class="SendBox">
<input type='text' id="messageBox" class="fill">
<button type="button" class="btn btn-secondary" id="pop"><img src="" style="height:30px;width:25px;"></button>
<button type="button" id="send" style="width:150px;">Send</button>
</div>
</div>
</div>
<script>
var newUserId = <?=$_SESSION['userId']?>;
var newUserImage = "<?=$_SESSION['userImage']?>";
</script>
<script src="https://code.jquery.com/jquery-3.4.0.js" integrity="sha256-DYZMCC8HTC+QDr5QNaIcfR7VSPtcISykd+6eSmBW5qo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
<script src="https://js.pusher.com/4.4/pusher.min.js"></script>
<script>
$(document).ready(function(){
$('#pop').popover({title: "<h5><img src='https://user-images.githubusercontent.com/20957865/39409236-b842dc32-4be3-11e8-998f-cab72cb2e8d7.png' style='height:30px;width:25px;'> Giphy Gif <button type='button' class='close' id='closeGui' ><span aria-hidden='true'>×</span></button></h5>", content: "<h4 id='WTD'>Click On The Gif You Want to Send</h4><input id='searchBar' type='text'><button id='queryGiphy'>Search</button></div><div id='container'></div></div>", html: true, placement: "top", trigger: "manual"});
$('#pop').click(function(event) {
$("#pop").popover('toggle');
});
$('#pop').on('shown.bs.popover', function(){
function searchGiphy() {
var NewSearch = $("#searchBar").val();
var search = NewSearch.split(' ').join('+');
console.log('Searching W/ KeyWord:'+search);
$("#searchBar").val('');
$("#searchBar").hide();
$("#queryGiphy").attr("disabled", true);
$("#queryGiphy").hide();
$("#WTD").show();
$("#container").empty();
var xhr = $.get("https://api.giphy.com/v1/gifs/search?q="+search+"&api_key=&limit=5");
xhr.done(function(data) {
for (var i = 0; i < data.data.length; i++){
$("#container").append("<img src='"+data.data[i].images.original.url+"' style='height:200px;width: 250.5px;'>");
}
});
}
$('exampleModalLong').click(function(event){
event.stopPropagation();
});
$("#container").on("click", "img", function (event) {
// var _target = event.target;
var newSrc = $(event.target).attr('src');
alert("<img src='"+newSrc+"'>")
});
$('#closeGui').click(() => {
$("#searchBar").val('');
$("#searchBar").show();
$("#queryGiphy").attr("disabled", false);
$("#queryGiphy").show();
$("#WTD").hide();
$("#container").empty();
});
$('#btnClose').click(() => {
$("#searchBar").val('');
$("#searchBar").show();
$("#queryGiphy").attr("disabled", false);
$("#queryGiphy").show();
$("#WTD").hide();
$("#container").empty();
});
document.getElementById("closeGui").addEventListener("click", () =>{
$("#pop").popover('hide');
});
document.getElementById("queryGiphy").addEventListener("click", () =>{
searchGiphy();
});
$('#searchBar').on('keypress',function(e) {
if(e.which == 13) {
searchGiphy();
}
});
});
});
</script>
<script>
function insertMessage(userId, msg, time, userName){
var htmlToInsert = '';
var consoleCommand = '';
if(myUserId == userId){
if(msg.toLowerCase() == "!reload" || msg.toLowerCase() == "!hub" ||msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?" || msg.substring(0, 5).toLowerCase() == "!img:" || msg.substring(0, 4).toLowerCase() == "!yt:" || msg.toLowerCase() == "!pro"){
if(msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?"){
htmlToInsert = "<div class='row'><div class='you pull-right col-12'>Commands<br>!help || !? | get a List of CMDS;<br>!reload | Reload the messenger;<br>!hub| to got to the Hub Page;<br>!pro | to go to your Profile Page;<br>!pray to go to Prayer Request Page;</div><br></div>";
}
if (msg.toLowerCase() == "!reload"){
location.reload();
}
if(msg.toLowerCase() == "!hub"){
window.open("","_self");
}
if(msg.toLowerCase() == "!pro"){
window.open("","_self");
}
if(msg.toLowerCase() == "!pray"){
window.open("","_self");
}
if(msg.substring(0, 5).toLowerCase() == "!img:"){
htmlToInsert = "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br><img src='"+msg.substring(5)+"' style='height: 155px;width: 200px;'></div></div><br></div>";
} else {
htmlToInsert = "<div class='row'><div class='you pull-right col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br>"+msg+" </div></div><br></div>";
var audio = new Audio('sentmsg.mp3');
audio.play();
}
} else {
if(msg.toLowerCase() == "!reload" || msg.toLowerCase() == "!hub" ||msg.toLowerCase() == "!help" || msg.toLowerCase() == "!?" || msg.substring(0, 5).toLowerCase() == "!img:" || msg.substring(0, 4).toLowerCase() == "!yt:"){
if(msg.substring(0, 5).toLowerCase() == "!img:"){
htmlToInsert = "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br><img src='"+msg.substring(5)+"' style='height: 155px;width: 200px;'></div></div><br></div>";
} else {
consoleCommand = msg;
msg = '';
}
} else {
if (msg != '' || msg != 'undefined'){
htmlToInsert = "<div class='row'><div class='notU pull-left col-12'><div class='SentBy'>Sent by "+userName+" at "+time+"<br>"+msg+" </div></div><br></div>";
var audio = new Audio('newmsg.mp3');
audio.play();
} else {
console.log('The command '+consoleCommand+': was logged by '+userName);
htmlToInsert = '';
}
}
}
if(htmlToInsert != ''){
$('#MessagesContainer').append(htmlToInsert);
objDiv = document.getElementById("MessagesContainer");
setTimeout(function(){
objDiv.scrollTop = objDiv.scrollHeight;
}, 500);
} else {
console.log('NOGO!');
}
}
// Enable pusher logging - don't include this in production
Pusher.logToConsole = true;
var pusher = new Pusher('api Key', {
cluster: 'mt1',
forceTLS: true
});
var myUserId = "<?=$_SESSION['userId']?>";
var channel = pusher.subscribe('my-channel');
channel.bind('MainChat', function(test) {
insertMessage(test.userId, test.message, test.time, test.userName);
});
</script>
<script src="js/GIFY.js"></script>
</body>
</html>
感谢所有帮助 〜韦西