Actualmente, estoy usando literales moderados para generar botones para acompañar los datos almacenados localmente por resultado. Estos datos se generan a través de un clic que maneja llamar al almacenamiento para recuperar la información, mostrándola en un contenedor. Sin embargo, cuando quiero apuntar al botón, no responde.

Mi código

 $(document).ready(() => { const genMonthlyQueueBtn = $("#genMonthlyQueue"); const genTransientQueueBtn = $("#genTransientQueue"); const monthlyPlateQueue = () => { const $insertMonthly = $('#insertMonthlyPlates'); $insertMonthly.empty(); let monthlyPlates = JSON.parse(localStorage.getItem('Monthly Plates')); for (i = 0; i < monthlyPlates.length; i++) { console.log(monthlyPlates); $insertMonthly.append(` <div class="container" id="generatedMonthlyPlates"> <input type="text" width="100px" name="monthlyLicensePlate" id="monthlyLicensePlate" class="licensePlate" placeholder="AB12345" value=${monthlyPlates[i]}/> <div class="text-center"> <button class="btn btn-warning" type="submit" id="editMonthlyPlate" name="action">Edit <i class="material-icons right">edit</i> </button> <button class="btn btn-danger" type="submit" id="deletePlate" name="action">Delete <i class="material-icons right">delete</i> </button> </div> </div> `) } } // get the array from local storage through queue function genMonthlyQueueBtn.click(() => { monthlyPlateQueue(); }) // call generated button and test functionality to edit and push back to storage const editMonthlyPlateBtn = $('#editMonthlyPlate'); const editMonthlyPlate = () => { console.log('I was clicked'); } editMonthlyPlateBtn.click(() => { editMonthlyPlate(); })

¿Hay una mejor manera de hacer esto? ¿O lo estoy haciendo de la manera incorrecta? Estos datos se activan con un clic de botón anterior, y cuando se agrega una función onClick al botón en sí, solo se llama cada vez que genero la lista y no cuando hago clic en el botón en sí, lo que se espera pero no lo que necesito.