1

Buenas, por más vueltas que le doy logro hacer una acción. El caso es que mediante ajax llamo a un archivo php que me imprime una etiqueta de html con echo. El problema viene a la hora de querer manejar esa etiqueta (a la que le he puesto una clase) ya que, presupongo, que es porque no existe en el DOM.

¿Como puedo crear el elemento en el DOM desde php para que pueda acceder al elemento desde javascript?

Aquí pongo el ejemplo que simplifique del proyecto que estoy trabajando. Un h2 en el que haciendo click, aparece la respuesta de php. Pero al hacer click en el párrafo creado, no me reconoce la clase.

$contenido=$('.contenido');
$btn=$('.click');
$p=$('.parrafo');

$btn.on('click', function() {
    $.ajax({
        url: 'prueba.php',
        success: function(response) {
            $contenido.html(response);
        }
    })
});

$p.on('click', function() {
    alert('Existo!');
});
<html>
<head>
    <meta charset="UTF-8">
    <title>Prueba</title>
</head>
<body>
    <h1 class="titulo">Prueba</h1>
    <p>Esto es una prueba</p>
    <h2 class="click" style="cursor:pointer">Click aqui para enseñar contenido php</h2>
    <p class="contenido"></p>

</body>
</html>

<?php
    echo '<p class="parrafo">Hola mundo</p>';
?>

También lo intente con este código de php utilizando la clase DOMDocument

<?php
    $doc=new DOMDocument();
    $doc->loadHTML('<p class="parrafo">Hola mundo</p>');
    echo $doc->saveHTML();
 ?>

Además también he probado sin ajax, cargando un archivo html desde javascript con .load(), pero no encuentro la manera.

1 respuesta 1

2

Si mal no recuerdo, JS puede actualizar el DOM y manipularlo, pero no puede recargarlo todo de nuevo (no estoy 100% seguro de esto), a menos que recargues toda la página, pero obviamente no quieres eso, ya que por eso estas usando AJAX. Lo que debes hacer, en vez de intentar actualizar el DOM, es usar la delegación de eventos.

A lo que se refiere la delegación de eventos es capturar un evento que se genere en algun elemento que ya exista en el DOM (generalmente un elemento que contenga mas elementos) e indicar que queremos verificar que ese evento se haya generado en un elemento especifico.

Te doy un ejemplo para que tomes la idea y la puedas aplicar en cualquier otra parte.

$(document).on('click', '.parrafo', function() {
    alert('Existo!');
});

En este ejemplo, estamos monitoreando el document para cualquier evento click, pero estamos indicando que ese evento click tiene que venir de algun elemento dentro de document que coincida con la clase .parrafo.


P.D. Solo ten en cuenta que, en este caso, la función actua para todos los p que coincidan con esa clase, y siempre puedes usar $(this) para hacer referencia al objeto que has hecho click.

2
  • Vale. Que fácil era. No se nada de delegación de eventos, así que me voy a poner a leer algo al respecto. Me ha funcionado perfecto, muchisimas gracias @Kenny
    – asantana o
    Commented el 3 ago. 2017 a las 17:01
  • De nada, que bueno que te ha servido. Creeme que yo tambien me senti en el cielo cuando recien descubrí la delegacion de eventos. Saludos! Commented el 3 ago. 2017 a las 17:02

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.