im trying to display an li
via ajax, but the problem is when i clicked the link the container is not popping up. But when i tried to just display it simple html it's working. Can someone help me to find what's the cause of this why it's not working?
here's the output when i tried to run on a simple html. It worked.
the div.
<div id="notificationsss"></div>
ajax script
$(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;
}