Foros del Web » Programando para Internet » Jquery »

Reconocer nuevos elementos agregados al DOM despues de un AJAX request

Estas en el tema de Reconocer nuevos elementos agregados al DOM despues de un AJAX request en el foro de Jquery en Foros del Web. Estoy tratando de mostrar un div que agregué al DOM via AJAX. Básicamente, via AJAX/PHP agregué algunos botones Código PHP: < button type = "button"  id ...
  #1 (permalink)  
Antiguo 12/01/2021, 18:46
Avatar de pcarvajal  
Fecha de Ingreso: enero-2002
Mensajes: 701
Antigüedad: 19 años
Puntos: 8
Reconocer nuevos elementos agregados al DOM despues de un AJAX request

Estoy tratando de mostrar un div que agregué al DOM via AJAX.

Básicamente, via AJAX/PHP agregué algunos botones

Código PHP:
<button type="button" id="viewPP_'.$index.'" onclick="viewPP('.index.')">View</button
Y tambien algunos divs ocultos (que son los que quiero mostrar cuando haga click en el botón que corresponda)

Código PHP:
<div id="viewPP_'.$index.'" style="display: none;"
En mi página principal tengo mi funcion JS que muestra u oculta los divs

Código PHP:
function viewPP(i){
    
var 
obj "viewPP_"+i;
    
document.getElementById(obj).style.display "block";
//$(obj).toggle();


Si uso "document.getElementBy..." , no hace nada (no tira error ni nada)

Su uso "$(obj)", tampoco hace nada.

Según entendí, todos los elementos nuevos que se agregan al DOM después que la página se haya cargado no son reconocidos por JQuery, hasta ahí bien, pero no puedo hayar la manera de hacerlo funcionar .

Alguna idea de como poder solucionarlo?
__________________
18 laaaaargos años en FDW... y soy de los pocos que ví correr sangre! :X
  #2 (permalink)  
Antiguo 12/01/2021, 21:34
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.476
Antigüedad: 9 años, 2 meses
Puntos: 952
Respuesta: Reconocer nuevos elementos agregados al DOM despues de un AJAX request

En primer lugar, tienes que evitar repetir el id; ten en cuenta que se trata de un dato único en el documento HTML, y que al momento de registrar un evento en Javascript o un estilo en CSS, de todos los elementos que tengan el mismo identificador, solo se verá afectado el primero de ellos. Por otra parte, en lugar de registrar el evento y función directamente en el elemento, emplea los métodos de jQuery para delegar eventos.

Por ejemplo, podrías agregar tanto el botón como el <div> en un mismo contenedor:

Código HTML:
Ver original
  1. <section class="group">
  2.     <button class="show">View</button>
  3.     <div class="info">Cuadro</div>

A diferencia del atributo id, una class sí puede repetirse, de tal forma que puedes agregar varios grupos de elementos con las mismas clases:

Código HTML:
Ver original
  1. <section class="group">
  2.     <button class="show">View</button>
  3.     <div class="info">Cuadro 1</div>
  4.  
  5. <section class="group">
  6.     <button class="show">View</button>
  7.     <div class="info">Cuadro 2</div>
  8.  
  9. <section class="group">
  10.     <button class="show">View</button>
  11.     <div class="info">Cuadro 3</div>

Ahora, tan solo queda apoyarse en las clases para delegar eventos y funciones:

Código Javascript:
Ver original
  1. $(".group").on("click", ".show", function(){
  2.     $(this).next().toggle();
  3. });

Con lo anterior, se registra el evento click en el elemento de clase show contenido en el elemento de clase group, ejecutándose una función en la cual se toma al elemento contiguo (el <div> de clase info) al botón pulsado (método .next()), y se le muestra u oculta (según si el elemento se encuentra visible o no) mediante el método .toggle().

No olvides registrar el estilo que oculte a los <div> de clase info:

Código CSS:
Ver original
  1. .info{
  2.     display: none;
  3. }

DEMO

Procura no registrar eventos y estilos en los mismos elementos HTML sino en archivos JS y CSS.

__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand



La zona horaria es GMT -6. Ahora son las 01:58.