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>