0

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.

enter image description here

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;

   }
Mike Cluck
  • 31,869
  • 13
  • 80
  • 91
wataru
  • 25
  • 1
  • 7
  • AJAX is asynchronous. You're not waiting for the DIV to be loaded before you add the click handler. Put that code in the success function. – Barmar Oct 10 '16 at 17:23
  • 1
    Or see http://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements for how you can delegate a handler for a dynamically-added element. – Barmar Oct 10 '16 at 17:24

0 Answers0