Creé un div con jquery donde estoy insertando un div que contiene una etiqueta <p> con una etiqueta. El botón div y las etiquetas p se ven correctamente, pero cuando quiero hacer clic en el botón no hace nada, estoy tratando de imprimir un mensaje en la consola, pero no se ve nada hasta ahora.

He intentado poner el código jquery para el botón en una etiqueta <script> diferente

 <div class="modal" id="basket-modal" tabindex="-1"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Basket items:</h5> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Pay</button> </div> </div> </div> </div>

 <script> $(document).ready(function(){ $('#addToCart').click(function(){ $('.modal-body-basket').empty(); for(var i = 0; i < localStorage.length; i++){ var key = localStorage.key(i); var value = localStorage.getItem(key); $('.modal-body').append('<div id=' + key + '><p class="delete-parent d-block">' + key + ' => ' + value + '</p><button class="delete-button" id=' + key + ' type="button">X</button></div>'); // $('.modal-body-basket').append("<button type='button' class='d-block' id=" + key + "> X </button>"); } $('#basket-modal').modal("show"); }); $('.delete-button').click(function(){ console.log('aaa'); }); }) </script>