0

Quiero recargar un div de mi web con el contenido devuelto de una petición AJAX. El contenido devuelto contiene código HTML, div, etc.

El problema es que no sé cómo recargar todos los eventos asociados a los antiguos div, los sustituidos.

Es decir, dentro de un cargo otro div con clase "card", dicho div ya existía antes y tenía un evento de click asocidado a éste pero al recargar el div padre con la información devuelta mediante AJAX he perdido el evento.

¿Cómo podría recuperar dichos eventos y enlaces del DOM?, gracias.

2
  • en el response del AJAX guardate el evento usando .attr(click), te devuelve la funcion en texto
    – Srsole
    Commented el 28 ago. 2019 a las 9:57
  • ¿Sin el contenido del evento dentro? Commented el 28 ago. 2019 a las 10:09

2 respuestas 2

0

Tu tienes esto:

<div id='div1' style='xxxxx' onclick='hazAlgo(123)'>CONTENIDO DEL DIV 1</div>

Y cuando la llamada AJAX finaliza te devuelve:

<div id='div2' style='xxxxx' onclick='hazAlgoMas(456)'>CONTENIDO DEL DIV 2</div>

En el .succes del AJAX cambiar un div por otro. Pues antes de eso haces:

var funcionAnterior = $("#div1").attr("onclick");

Esto lee el la funcion como un atributo mas y asi puesdes hacer lo que quieras con esta informacion, como por ejemplo:

$("#div2).attr("onclick", funcionAnterior);
0

Toda vez que elimines o reemplaces un elemento, aunque sea exactamente igual al anterior, los listeners se van a desasociar, por lo que no queda otra opción que volver a asociarlos o crearlos. Una opción es agrupar la asociación de los listeners en una función, de manera de poder volver a lanzarla cuando los nuevos elementos están cargados, ejemplo:

function agregaListeners() {
  document.getElementById("accion").addEventListener("click", () => {
    alert("este es el resultado de un listener");
  });
}

agregaListeners();// <-- Agregamos el listener la primera vez

document.getElementById("cambia-accion").addEventListener("click", () => {

  const contenidoPrevio = document.getElementById("cont").innerHTML;

  document.getElementById("cont").innerHTML = "";

  setTimeout(() => {// <-- esto sería la simulación de una llamada asíncrona, como un ajax

    document.getElementById("cont").innerHTML = contenidoPrevio;
    document.getElementById("accion").innerText = "Nuevo elemento, mismo listener";

    agregaListeners();// <-- Agregamos nuevamente el listener en el callback

  }, 1000);

});
<div id="cont">
  <button id="accion">Tocar primero este boton</button>
</div>
<button id="cambia-accion">Elimina y crea de nuevo los elementos</button>

Al hacer esto hay que tener cuidado de solo agregar los listeners de los elementos que se hayan remplazado, no de todos, porque en caso contrario los listeners se van a agregar, no se van a remplazar.

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.