asociar respuesta json de forma individual a divs cargados dinamicamente?

[kukiko11]

que tal foreros? veran... estoy trabajando en el modulo de denuncia para comentarios mal intencionados en mi web, dichos comentarios son cargados via php de forma dinamica cada uno con su respectivo id... al enviar el form de denuncia tengo el siguiente script que devuelve una respuesta json en el comentario donde el boton fue presionado:

Código:

<script>
    $('.form-denunciar').submit(
    function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            dataType: 'JSON',
            data: $(this).serialize(),
            success: function(data) {

                                                $('.status[]').html(data).fadeIn('slow');
            }
        })
        return false;
    }); 
})  
</script>

y esta la estructura div que se va cargando conforme se ingresan comentarios:

Código HTML:

<div class="comentario"> 
<form class="form-denunciar" action="denunciar.php" method="post">
Denunciar <button class="icon-block" name"denunciar-comentario </button>

<input hidden="hidden" type="text" name="denunciado"  id="denunciado" value="'.$d['usuario'].'" >
<input hidden="hidden" type="text" name="email" id="denunciado-email" value="'.$d['email'].'" >  

<div id="status" class="status"></div>
</form>

</div> 

el problema está en que al hacer el submit del form... la respuesta json resultante se muestra en todos los comentarios existentes y no unicamente en el comentario donde el boton de denuncia fue presionado...

alguna idea para asignar la respuesta de forma individual a un div en cuestion? tengo entendido que se podria resolver con jquery, tambien he oido acerca de arrays dinamicos pero no tengo claro como hacerlo

[infoturnosya]

Debe utilizar el puntero this para q solo afecte a ese comentario, ej:

Código Javascript:

<script>
    $('.form-denunciar').submit(
    function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            dataType: 'JSON',
            data: $(this).serialize(),
            success: function(data) {
                   //no olvides de quitarle el id="status" a este div
                  $(this).children('div.status').html(data).fadeIn('slow');
            }
        })
        return false;
    }); 
})  
</script>
 

[kukiko11]

lo hice de esa forma pero no me esta devolviendo la data, el boton funciona es decir cumple lo que debe hacer, pero no se nota la respuesta... este es el archivo php de donde viene la data respuesta:

Código PHP:

  <?php
session_start();
//incluimos la conexion a la base de datos y las configuraciones de seguridad
include "connect.php";


//declaramos variables para la data enviada por el boton de denuncia
    $denunciado = $_POST['denunciado'];
    $correo = $_POST['email'];

     $sql = mysql_query("INSERT INTO `denunciados`( `nombre`, `email`) VALUES ('$denunciado','$correo')" );

 //si se cumple la insercion de los datos, se notifica al usuario
     if ($sql) {

     echo (json_encode('Reporte recibido, lo tomaremos en cuenta | ')); 
 
//de lo contrario, se indica un error
     }else{
     echo (json_encode('Error con el servidor, intente mas tarde')); 
     }
?>   

y si, elimine el id del div le deje solo la clase
que sera que esta fallando?

[kukiko11]

Iniciado por infoturnosya

Debe utilizar el puntero this para q solo afecte a ese comentario, ej:

Código Javascript:

<script>
    $('.form-denunciar').submit(
    function() {
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            dataType: 'JSON',
            data: $(this).serialize(),
            success: function(data) {
                   //no olvides de quitarle el id="status" a este div
                  $(this).children('div.status').html(data).fadeIn('slow');
            }
        })
        return false;
    }); 
})  
</script>
 

no me resulto, osea no me devuelve la data, el boton cumple su funcion pero no se genera la respuesta json o no la muestra

[infoturnosya]

fijate de hacer un console.log($(this).children('div.status')) para saber si estamos buscando bien a ese elemento, o si no hace esto
$(this).children('div.status').html('mostrando datos...').fadeIn('slow');
Le pones un valor duro para saber si lo instanciamos bien al objeto.

[kukiko11]

Iniciado por infoturnosya

fijate de hacer un console.log($(this).children('div.status')) para saber si estamos buscando bien a ese elemento, o si no hace esto
$(this).children('div.status').html('mostrando datos...').fadeIn('slow');
Le pones un valor duro para saber si lo instanciamos bien al objeto.

ok el console como tal me indica:
Object { length: 0, prevObject: Object, context: undefined }

que el objeto esta indefinido