Estoy trabajando una seccion de notificaciones, funciona todo bien, el inconveniente que estoy teniendo es que funciona los click unicamente al hacer doble click. Como que si estuviera bloqueado al principio al hacer f5 en la pagina. Despues que hago el primer click y el segundo en cada elemento, como que se desbloquea y empieza a funcionar de manera normal, pero refresco la pagina y vuelve a ponerle ese tipoo de "bloqueo" q tengo que hacer doble click para que se active el evento click. Probe poniendo el id en el padre del elemento html pero igualmente sigue haciendo lo mismo.

este es el html 

hay alguna razon por la cual tenga este comportamiento mi codig?


     <li>
                    <div class="solicitudes" id="solicitudes">
                        <div class="caja-notificacion" id="caja-notificacion">
            
                        </div>
                    
                        <div class="fondocirculodelicono adm">
                            <i class="iconoadentrodelcirculo fas fa-bell"></i>
                        </div>

                        <p class="textoicono">Solicitudes</p>
                    </div>
                        <div class="despliegue-notificacion" id="despliegue-notificacion">
            

                        </div>

                   
                </li>

     <div class="container-datos-solicitante" id="container-datos-solicitante">
            <div class="box-solicitante" id="box-solicitante">
                
            </div>
        </div>



y este es el js 

             

          $(document).ready(function () {

           desplegarNotificacion();
  
         function mostrar_ocultarNotificaciones() {
          let cajaNoti = document.getElementById("despliegue-notificacion");

           if (cajaNoti.style.display == "none") {
            MostrarNotificaciones();
           } else {
            OcultarNotificaciones();
        }
        }

        function MostrarNotificaciones() {
         document.getElementById("despliegue-notificacion").style.display = "block";
       }
        function OcultarNotificaciones() {
        document.getElementById("despliegue-notificacion").style.display = "none";
      }



             function Mostrar_ocultarDatosDelSolicitante() {
         let cajaDatosDelSolicitante = document.getElementById("container-datos-solicitante");

          if (cajaDatosDelSolicitante.style.display == "none") {
            MostrarDatosDelSolicitante();
         } else {
          OcutarDatosDelSolicitante();
         }
  }

       function MostrarDatosDelSolicitante() {
         document.getElementById("container-datos-solicitante").style.display = "block";
      }

      function OcutarDatosDelSolicitante() {
       document.getElementById("container-datos-solicitante").style.display = "none";
       }





  
       function notificacion() {
         $.ajax({
         url: "../../model/parcel/notifications.php",
         type: "GET",
          success: function (response) {

        let notificacion = JSON.parse(response);
  
            if (notificacion.cuentaDatos[0] == '0') {
           }     else {
             let template = "";

              template += `
             <div class="cajita-notificacion"  >
                       <div class="caja-notificacion" tomoDato='${notificacion.cuentaDatos}'> 
                          <span class="info-bd"> <span class="info-titulo"></span> 
             ${notificacion.cuentaDatos[0]}<span>
                         </div>
                   </div>  
 
          `;
          $("#caja-notificacion").html(template);

        }

      },


        });

      }

       notificacion();



           function desplegarNotificacion() {

          $("#solicitudes").click(function () {
           event.preventDefault();
         $.ajax({
           url: "../../model/parcel/despliegue_notifications.php",
           type: "GET",
          success: function (response) {
          let despliegueNoti = JSON.parse(response);
          let template = `<div class="header-despliegue" id="header-despliegue">
              Notificaciones
            </div>`;

            despliegueNoti.forEach((recorroDatos) => {
               template += `
               
           <div class="body-despliegue" id="body-despliegue" tomoDato="${recorroDatos.id}" >
             ${recorroDatos.nombre} ha enviado una solicitud para ${recorroDatos.tipo}
          </div>
          `;
          });

            $("#despliegue-notificacion").html(template);
          
            mostrar_ocultarNotificaciones();

          },
         });
         });

      }



           $(document).on("click", "#body-despliegue", function () {


            let elementoRequerido = $(this)[0];
            let id = $(elementoRequerido).attr("tomoDato");

           $.post('../../model/parcel/request-data-notifications.php', { id }, function (response) {
           let DatosDelSolicitante = JSON.parse(response);
           let template = "";

           DatosDelSolicitante.forEach((recorroDatos) => {

           template += `
        
        <div class="mini-box">
        <div class="dato-titulo">
          Tipo
        </div>
        <div class="dato-contenido">
          ${recorroDatos.nombre}
        </div>
        </div>
        <div class="mini-box">
        <div class="dato-titulo">
          Tipo
        </div>
        <div class="dato-contenido">
          ${recorroDatos.apellido}
        </div>
        </div>
        <div class="mini-box">
        <div class="dato-titulo">
          Tipo
        </div>
        
        
        
        `;

      })

      $('#box-solicitante').html(template);
      Mostrar_ocultarDatosDelSolicitante();


         })
       });
      });