我试图通过ajax显示li
,但问题是当我点击链接时容器没有弹出。但是,当我试图显示它简单的HTML时,它正在工作。有人可以帮助我找出导致这种情况失败的原因吗?
这是我尝试在简单的html上运行时的输出。它奏效了。
<div id="notificationsss"></div>
ajax脚本
$(document).ready(function() {
loadnotif();
$("#notificationLink").click(function() {
$("#notificationContainer").fadeToggle(300);
$("#notification_count").fadeOut("slow");
return false;
});
//Document Click hiding the popup
$(document).click(function() {
$("#notificationContainer").hide();
});
});
function loadnotif() {
$.ajax({
url: 'getrecords.php',
method: 'POST',
data: {
"loadnotif": 1
},
success: function(data) {
$('#notificationsss').html(data);
}
});
}
getrecords.php
if(isset($_POST['loadnotif'])){
$output = ' <ul id="main-menu" class="nav navbar-nav navbar-right">
<li class="dropdown hidden-xs">
<li id="notification_li">
<a href="#" id="notificationLink"><i class="fa fa-globe"></i>
<span class="notification-counter" style="background-color:red;border-radius:3px;padding: 1px 3px;position:relative;top:-9px;right:9px;font: 8px Verdana;;">1</span></a>
<div id="notificationContainer">
<div id="notificationTitle" style="text-align:center;background-color:#ba4f46;color:#fff;">Notifications</div>
<div id="notificationsBody" class="notifications">
<a href="index.php" style="display:block;color:black;margin-top:10px;background-color:#f6e9e8;" id="notifa">
<div>
<img src="img/izuku.jpg" style="max-width:50px;max-height:70px;float:left;margin:0px 10px;">
<p style="display:inline;margin-top:20px;"><strong>Rommel Deauna</strong> Uploaded a Lecture on <strong><br>Computer Security</strong></p>
<p style="font-size:12px;">November 12, 2016 5:06PM</p>
<hr>
</div>
</a>
</div>
<div id="notificationFooter" style="background-color:#ba4f46;"><a href="#" style="color:#fff;">See All</a></div>
</div>
</li>
</li>
</ul>';
echo $output;
}