Estoy tratando de cargar dinámicamente un widget externo desde un detector de eventos que escucha los cambios en un menú desplegable. Cuando simplemente cargo el widget desde el archivo HTML, funciona bien. Cuando uso eventlistener, no carga el widget y se atasca en el control giratorio de carga, por lo que el elemento se agrega al árbol de elementos pero no se carga por completo. Los enlaces del menú desplegable proporcionan un atributo de datos que luego cambia la identificación del campo "liga de datos" en el widget.
El widget:
<div id="wg-api-football-standings" data-host="api-football-v1.p.rapidapi.com" data-league="383" data-team="" data-season="2021" data-key="0ecaca" data-theme="grey" data-show-errors="false" class="api_football_loader"> </div>El detector de eventos:
// EventListener set on the dropdown menu leagueSelector.addEventListener('click', function(e) { // get the id from the dropdown menu data attribute const leagueId = e.target.getAttribute("data-league-id"); // the markup with the new id inserted in the "data-league" field const markup = `<div id="wg-api-football-standings" data-host="api-football-v1.p.rapidapi.com" data-league="${leagueId}" data-team="" data-season="2021" data-key="0ecaca" data-theme="grey" data-show-errors="false" class="api_football_loader"> </div>` // clear the widget container and then insert the new markup tableContainer.innerHTML = ''; tableContainer.insertAdjacentHTML('afterbegin', markup); });La biblioteca que está utilizando escucha el evento DOMContentLoaded , por lo que cargará los widgets cuando se cargue la página. Puede "forzarlo" para que se vuelva a cargar enviando un evento DOMContentLoaded en la ventana, solo tenga en cuenta que si tiene algo que escuche ese evento, también se activará.
leagueSelector.addEventListener('click', function(e) { // Your code... window.dispatchEvent(new Event('DOMContentLoaded')); });