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>