Reconocer nuevos elementos agregados al DOM despues de un AJAX request

[pcarvajal]

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?

[Alexis88]

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:

<section class="group">
    <button class="show">View</button>
    <div class="info">Cuadro</div>
</section>
 

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:

<section class="group">
    <button class="show">View</button>
    <div class="info">Cuadro 1</div>
</section>
 
<section class="group">
    <button class="show">View</button>
    <div class="info">Cuadro 2</div>
</section>
 
<section class="group">
    <button class="show">View</button>
    <div class="info">Cuadro 3</div>
</section>
 

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

Código Javascript:

$(".group").on("click", ".show", function(){
    $(this).next().toggle();
});
 

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:

.info{
    display: none;
}
 

DEMO

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