He desglosado mi problema para que sea simple. Un invitado puede publicar una pregunta y un anfitrión puede responderla. Cuando el anfitrión responde una pregunta, para cada pregunta hay un campo de texto con un botón de envío de respuesta. Para el host, hay una cantidad x de botones en una página en un momento dado, según la cantidad de preguntas que publique un invitado. Estoy tratando de orientar cada botón de respuesta de envío (que tiene el mismo identificador) con un modal de confirmación. Logré apuntar al primer botón, pero por alguna razón, todos los demás botones con el mismo identificador no apuntarán. También traté de hacer un bucle for a través de los botones y esencialmente envolví un bucle for alrededor de la dulce alerta Javascript sin éxito. Esto es lo que probé. Cualquier ayuda es apreciada.
$(document).ready(function() { const btnSubmit = document.querySelector('.q_a'); btnSubmit.addEventListener('click', function(e) { console.log(this.id); e.preventDefault(); swal({ title: 'Confirm', text: 'Your question/answer will be publicly visible - it is not a private message. Are you sure you want to proceed?', buttons: [ 'No', 'Yes, I am sure' ] }) .then((isConfirm) => { if (isConfirm) { swal("Confirming...", { buttons: false, }); btnSubmit.submit(); } else { return null; } }) }); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script> <html> <head> <meta charset="utf-8"> <title>Untitled</title> <meta name="description" content="This is an example of a meta description."> <link rel="stylesheet" type="text/css" href="theme.css"> </head> <body> <input type="submit" name="commit" value="Submit Answer" class="q_a btn btn-success" id="q_a"> <input type="submit" name="commit" value="Submit Answer" class="q_a btn btn-success" id="q_a"> </body> </html>Creo que deberías usar document.querySelectorAll('.q_a') en lugar de document.querySelector('.q_a') , y luego usar for of para hacer un bucle en cada objetivo para vincular el evento. querySelector simplemente devuelve el primer dom coincidente. al igual que:
const btnSubmits = document.querySelectorAll('.q_a'); for(btn of btnSubmits){ btn.addEventListener('click', function(e){ ... }) }Una forma de resolver esto, sin hacer un bucle de todos los elementos, es usar jQuery para agregar el detector de eventos. Para hacer esto, reemplace su
btnSubmit.addEventListener('click', function(e) {con
$('input.q_a').on('click', function(e){