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