-2

Estoy trabajando una sección de notificaciones y funciona todo bien, el inconveniente que estoy teniendo es que funciona los clic unicamente al hacer doble clic, como que si estuviera bloqueado al principio, al hacer f5 en la página.

Después que hago el primer clic y el segundo en cada elemento, como que se desbloquea y empieza a funcionar de manera normal, pero refresco la página y vuelve a ponerle ese tipo de "bloqueo", que tengo que hacer doble clic para que se active el evento.

Probé poniendo el id en el padre del elemento HTML, pero igualmente sigue haciendo lo mismo.

¿Hay alguna razón por la cual tenga este comportamiento mi código?

$(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();


         })
       });
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

1

1 respuesta 1

0

El clic funciona correctamente, agrega un console.log('Clic!'); dentro de la función para comprobarlo. El problema es que no se está mostrando el contenido de notificaciones, tal vez porque if (cajaNoti.style.display == "none") en la primera comprobación el estilo está vacío.

Por alguna razón, Javascript no obtiene el valor none desde CSS, sino hasta que el atributo display es asignado. Para hacerlo funcionar con tu código actual, solo necesitas aplicar el estilo en línea:

<div class="despliegue-notificacion" id="despliegue-notificacion" style="display:none;"></div>

Sin embargo, ya que estás usando jQuery, te recomiendo .toggle() para mostrar y ocultar sin tener que verificar el valor actual.

En este ejemplo agregué una llamada a mostrar_ocultarNotificaciones() dentro del evento onclick, solo para probar:

$(document).ready(function () {
         desplegarNotificacion();
  
         function mostrar_ocultarNotificaciones() {
            $("#despliegue-notificacion").toggle();
        }

        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();
                  // Elimina la siguiente línea, es solo para probar
                  mostrar_ocultarNotificaciones();
         $.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();


         })
       });
      });
#despliegue-notificacion {
    display:none;
    min-height:50px;
    background:#ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.