Déclencher fonction à la fermeture de modale (Bootstrap 5)

Bonjour à tous,

Je n'arrive pas à mettre en place le code qui permettrait de déclencher la fonction newGame() de main.js depuis un bouton généré dynamiquement sur modale Bootstrap 5 :

J'ai essayé depuis un event onclick sur le bouton : le code signale que newgame() est undefined, pourtant le link au script est bien présent dans index.html (qui contient la modale)

J'ai ensuite essayé avec un addeventlistener sur le bouton généré grâce à la constante btnNewGameFromModal qui est le nom du bouton en incrustant un <script type="text/javascript">...</script> dans la définition de ladite constante, rien n'y fait ...

Le problème vient du fait que le bouton est généré à l'ouverture de la modale, je ne connais pas la méthode à utiliser pour lui attribuer alors une/des fonctions ...

Merci d'avance pour votre aide

Voici le code :

main.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
btnNewGame.addEventListener("click", () => {
  //Si il existe une partie en cours, demande de confirmation par modale
  if (j1.getScoreCourant() > 0 || j2.getScoreCourant() > 0) {
 
    myModal.show()
    titreModal.textContent = modals.titre_modal_confirmation
    contenuModal.innerHTML = modals.contenu_modal_confirmation
    footerModal.innerHTML = modals.footer_modal_confirmation
  } else {
    newGame()
  }
});
const newGame = () => {  
 
  //Nouvelle partie
  initialiser();
  btnRoll.classList.remove("disabled");
  divJoueurActif.classList.add("animationColor");
  // divJoueurActif.classList.remove("animationScale");
}

constante importée depuis module modals-constants.js :

Code:

1
2
3
4
export const footer_modal_confirmation =
    `<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button> 
<button type="button" id="btnNewGameFromModal" class="btn btn-secondary" data-bs-dismiss="modal">Oui, je suis d'accord</button>
`

portion index.html de la modale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
    <!-- Modal -->
    <div class="modal fade modal-lg" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary text-white">
                    <h5 class="titre_modal" id="titre-modal"></h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="lead"></p>
                    <div class="contenu-modal p-5" id="contenu-modal"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
                </div>
            </div>
        </div>
    </div>