Tengo un problema con un código que estoy escribiendo para un proyecto. Mi proyecto es un rastreador de colección de juegos de cartas coleccionables que le permite a alguien agregar o eliminar tarjetas que posee de su colección y mantener un rastreador digital en su colección.

Cuando relleno la parte de la colección de mi página:

Estoy creando los botones para saber que esto está funcionando:

 const populateCollection = function () { for (const field in cardNames) { $('.collection').append('<li class="collection-details">' + cardNames[field] + '<button id="removeCard">Remove Card</button>' + '</li>') } }

sin embargo, no puedo hacer que esto funcione para mis botones:

 const removeCardActivate = function () { $('#removeCard').on('click', mtgEvents.onDeleteCard) }

Estoy ejecutando ambas funciones en esta función:

 const onSignIn = function (event) { event.preventDefault() const form = event.target const authData = getFormFields(form) authData.credentials.email.toLowerCase() mtgApi .signIn(authData) .then((response) => { collectionId = response.cardCollection return response }) .then(appUi.onSignInSuccess) .then((res) => {}) .then(appUi.populateCollection) .then(appUi.removeCardActivate) .catch(appUi.onSignInFailure) }

Creo que puede tener algo que ver con la sincronización/asincronización, pero no tengo idea de cómo solucionarlo. Incluso intenté cambiar la identificación a clase y agregar onclick="..." al botón HTML, pero tampoco funcionó.