Validación jQuery y Ajax para formularios generados dinámicamente con PHP

[malmonacid]

Estimados;

Mi problema es que no sé, y no encuentro info al respecto, para validar un formulario que lo tengo dentro de un ciclo do-while (en realidad son dos ciclos anidados), por lo cual el formulario se replica para cada instancia de la consulta. El jQuery que lo valida y el Ajax que envia la info sirve para el caso cuando es un sólo formulario, no formularios generados dinámicamente (me refiero generandolos usando la instancia do-while).
Por lo poco que sé (se debe notar!!) el problema es que se necesita asignar un índice, tb dinámico a la función Js para poder distinguir cada formulario.

Agradecería enormemente cualquier orientación. Si no estoy muy perdido y el tema es lo del id único, no sé como agregarlo al Script que tengo.

Adjunto mi código, a ver se se logra entender mejor.

Este extracto del código es un archivo que está inserto dentro de un ciclo do-while anidado dentro de otro ciclo do-while, la razón de eso, creo que es harina de otro costal.

Código PHP:

<div class="new-com-bt">
        <span>Write a comment ...</span>
    </div>
    <div class="new-com-cnt">
        <input type="hidden" id="name-com" name="name-com" value="<?php echo ObtenerNombreFull_Usuario($_SESSION['MM_IdUser']); ?>" />
        <input type="text" id="mail-com" name="mail-com" value="" placeholder="Your e-mail adress" />
        <textarea class="the-new-com" placeholder="Ingresa tu comentario"></textarea>
        <div class="bt-add-com">Post comment</div>
        <div class="bt-cancel-com">Cancel</div>
    </div>
    <div class="clear"></div>
</div><!-- end of comments container "cmt-container" -->
 

Código Javascript:

<script type="text/javascript">
   $(function(){ 
        //alert(event.timeStamp);
        $('.new-com-bt').click(function(event){    
            $(this).hide();
            $('.new-com-cnt').show();
            $('#name-com').focus();
        });
 
        /* when start writing the comment activate the "add" button */
        $('.the-new-com').bind('input propertychange', function() {
           $(".bt-add-com").css({opacity:0.6});
           var checklength = $(this).val().length;
           if(checklength){ $(".bt-add-com").css({opacity:1}); }
        });
 
        /* on clic  on the cancel button */
        $('.bt-cancel-com').click(function(){
            $('.the-new-com').val('');
            $('.new-com-cnt').fadeOut('fast', function(){
                $('.new-com-bt').fadeIn('fast');
            });
        });
 
        // on post comment click 
        $('.bt-add-com').click(function(){
            var theCom = $('.the-new-com');
            var theName = $('#name-com');
            var theMail = $('#mail-com');
 
            if( !theCom.val()){ 
                alert('You need to write a comment!'); 
            }else{ 
                $.ajax({
                    type: "POST",
                    url: "ajax/add-comment.php",
                    data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
                    success: function(html){
                        theCom.val('');
                        theMail.val('');
                        theName.val('');
                        $('.new-com-cnt').hide('fast', function(){
                            $('.new-com-bt').show('fast');
                            $('.new-com-bt').before(html);  
                        })
                    }  
                });
            }
        });
 
    });
</script>
 

[codeams]

Hola, por lo que entendí lo que tu necesitas es un event handler. Con esto me refiero a utilizar on() en vez de click, esto es debido a que no puedes definir eventos para elementos que aun no han sido añadidos al DOM. Solucionemos el problema definiendo on() para un elemento padre que no haya sido creado dinámicamente,

tal como se muestra en el ejemplo siguiente:

Código Javascript:

$('body').on('click', '.bt-add-com', function(){
    // realizar validación
}).on('keypress', '.element', function(){
  // otra validación
})
 

[malmonacid]

Muchas gracias Codeams por responder y realmente aprecio tu ayuda. Traté de implementar tu solución pero mi falta de expertise no me deja ver la solución.

Lo que entiendo, en la práctica, es que debo reemplazar mi script original, por ejemplo para la validación al enviar la información.

Código Javascript:

// on post comment click
$('body').on('click', '.bt-add-com', function(){
            var theCom = $('.the-new-com');
            var theName = $('#name-com');
            var theMail = $('#mail-com');
 
            if( !theCom.val()){
                alert('You need to write a comment!');
            }else{
                $.ajax({
                    type: "POST",
                    url: "ajax/add-comment.php",
                    data: 'act=add-com&id_post='+<?php echo $id_post; ?>+'&name='+theName.val()+'&email='+theMail.val()+'&comment='+theCom.val(),
                    success: function(html){
                        theCom.val('');
                        theMail.val('');
                        theName.val('');
                        $('.new-com-cnt').hide('fast', function(){
                            $('.new-com-bt').show('fast');
                            $('.new-com-bt').before(html);  
                        })
                    }  
                });
            }
        });
 
 });
 

Bueno la verdad es que no se como seguir.

Agradecería nuevamente me pudieras guiar un poco más para poder implementar la solución.

Muchas gracias de antemano.

[codeams]

¿Cuántos .the-new-com pueden existir al mismo tiempo, sólo uno?
¿La consola de chrome o de firefox arrojan algún error?

Es que a primera vista el código luce bien pero necesito un poco más de contexto para encontrar el problema.

[malmonacid]

Pueden existir varios, dependiendo de lo que arroje la consulta o set de registros que estoy mostrando a través de un DO-WHILE. El contexto es que son Opiniones que estoy mostrando (set de registros que mencioné antes), el ".the-new-com" es el equivalente al clásico formulario PHP para recoger comentarios asociados a estas Opiniones.
Por lo tanto, el ".the-new-com" pueden repetirse muchas veces al mismo tiempo y como se replica asociado a cada opinión que haya, la validación jQuery que tengo no reconoce, al parecer, cual ".the-new-com" debe validar. Me imagino que el Ajax asociado que envía la información, no necesita ajuste??.

Firefox no me arroja ningún error, lo que pasa es que cuando ingreso el comentario y lo trato de enviar no hace nada, el ".bt-add-com" no responde.

Investigando el evento on() entendí que sirve para cuando quieres ir generando nuevos ".the-new-com" dinámicamente a partir de uno inicial. En mi caso los ".the-new-com" ya están generados a través del set de registros con el que muestro las Opiniones.

Realmente agradezco tu tiempo e interés por ayudar. Quedo atento a cualquier consulta o novedad.

Gracias de antemano.