1

Espero que se encuentren bien. Tengo una duda y es la siguiente: de un evento de ajax creo un evento para traer los comentarios y respuestas de una publición:

<div id="recargar">
<blockquote>
   <p>primer comentario</p>
   <small>Escrito por <cite title="Source Title">Usuario 1</cite></small>                
   <span class="h6">2021-01-27 17:07:30</span>                                   
 </blockquote>
 <blockquote>
    <p>respuesta 1 del primer comentario</p>
    <small>Escrito por <cite title="Source Title">Usuario 2</cite></small>
    <span class="h6">2021-01-27 17:28:36</span>
  </blockquote>
  <blockquote>
     <p>respuesta 2 del primer comentario</p>
     <small>Escrito por <cite title="Source Title">Usuario 3</cite></small>
    <span class="h6">2021-01-27 17:28:52</span>
  </blockquote> 
  <div class="input-group pull-right">
    <button type="button" class="btn btn-success btn-xs agregarRespuesta" 
     idComentario="1">Responder</button>
  </div>
  <div class="clearfix"></div>
  <div class="addRespuesta"></div></div>

Y tengo un evento que carga el cuadro de texto donde se escribe la respuesta del comentario. El guardado y el recargo de la pagina lo hace correctamente. El detalle está en lo siguente:

<script type="text/javascript">
$(document).on('click', '.agregarRespuesta', function(e) {
e.preventDefault()
$(".agregarRespuesta").each(function(index, el) {               
    $(this).on('click', function(){                 
        e.preventDefault()
        var id_comentario = $(this).attr('idComentario');               

        $('.addRespuesta').each(function(index1, el1) {
            if(index == index1) {
             $(this).html('<div class="clearfix"></div>'+
                          '<div class="col-md-10 col-sm-10 col-lg-10 col-xs-8">'+ 
                             '<div class="form-group">'+
                                '<textarea class="form-control" id="comentarioR" 
                                   name="comentarioR" rows="4" style="resize: none;" 
                                   placeholder="Escribe aquí tu comentario"></textarea>'+
                             '</div>'+
                            '</div>'+
                            '<div class="col-md-2 col-sm-2 col-lg-2 col-xs-4">'+
                               '<button type="button" class="btn btn-info btn-sm pull-right 
                                 btnAddRespuesta" 
                                 id_comentario_evento="'+id_comentario+'">Responder al 
                                 comentario</button>'+
                             '</div>'
                            +'<div class="clearfix"></div>')
                    }
                })
            })
        })
    });</script>

Cómo hago para que al darle clic en el botón "Responder" me aparezca el div para guardar otra respuesta. Para este caso como lo tengo en el script, para activar el cuadro de respuesta tengo que dar doble clic en dicho botón y si llego a quitar la linea $(document).on('click', '.agregarRespuesta', function(e) {}) deja de funcionar.

Sería muy amable que me orientaran un poco. Gracias

1 respuesta 1

1

Inicias escuchando clics en .agregarRespuesta y, dentro, nuevamente agregas otra función igual con $(this).on('click', ...), por eso necesitas hacer dos clics y, luego, se multiplican los eventos asignados, aunque no sea visible.

Lo que debes hacer es:

  • Escuchar clics solo una vez en los elementos con la clase deseada
  • No usar ciclos, porque no se necesitan
  • Obtener índice el que recibió clic usando $.index()
  • Acceder al div que modificarás por su índice: $.eq()
$(document).on('click', '.agregarRespuesta', function(e) {
    e.preventDefault()
    let id_comentario = $(this).attr('idComentario');
    // Obtener índice el elemento que recibió clic
    let index = $('.agregarRespuesta').index($(this));          
    // Obtener div por índice
    $('.addRespuesta').eq(index).html('<div class="clearfix"></div>'+
                          '<div class="col-md-10 col-sm-10 col-lg-10 col-xs-8">'+ 
                             '<div class="form-group">'+
                                '<textarea class="form-control" id="comentarioR" 
                                   name="comentarioR" rows="4" style="resize: none;" 
                                   placeholder="Escribe aquí tu comentario"></textarea>'+
                             '</div>'+
                            '</div>'+
                            '<div class="col-md-2 col-sm-2 col-lg-2 col-xs-4">'+
                               '<button type="button" class="btn btn-info btn-sm pull-right 
                                 btnAddRespuesta" 
                                 id_comentario_evento="'+id_comentario+'">Responder al 
                                 comentario</button>'+
                             '</div>'
                            +'<div class="clearfix"></div>');
});
1
  • Muchísimas gracias compañero por orientarme en la solución, de verdad me acabas de salvar, ya que estaba estancado con esa parte. el 28 ene. 2021 a las 15:19

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.