Skip to main content
Formato de código y legibilidad
Origen Enlace
Triby
  • 25.2k
  • 3
  • 18
  • 36

Problema con Evento Click jquery js y php ¿Por qué tengo que dar doble clic para que se lance evento?

Estoy trabajando una seccionsección de notificaciones, y funciona todo bien, el inconveniente que estoy teniendo es que funciona los clickclic unicamente al hacer doble click. Comoclic, 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 mismopágina.

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

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.

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


     })
   });
  });

¿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>

Problema con Evento Click jquery js y php

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


     })
   });
  });

¿Por qué tengo que dar doble clic para que se lance evento?

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>

Origen Enlace

Problema con Evento Click jquery js y php

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


     })
   });
  });