Не выполняются некоторые части кода в js

У меня есть две веб страницы и первая подгружает полностью вторую через fetch запрос.
Вторая веб страница имеет свои селекторы, свой скрипт. Запуск функции с первой веб страницы производится из xhr.onload при получении необходимого результата.
функция из первой веб-страницы:

window.showBalance = function (wallet, balance1, balance2,wallet2, balance3, balance4){
        $("#choose").html('Ваш кошелёк');
        $("#frame1").css("display","none");
        fetch('./output.html')
        .then(function(response){
            response.text().then(function(text){
            $("#frame-2").html(text);});
            console.log("showBalance");
        });
        $("#wallet-image-balance").css("background-image","url('"+wallet+".png"+"')");
        $("#balance-text-container").html("<div id='balance-text'>"+balance1+"</div><div id='balance-text-dollars'>"+balance2+"</div>");
        $("#balanceContainer").html("<div class='line'></div><div class='balanceContainer'><div class='small' id='sone'></div>"+balance1+"</div><div class='line'></div>");
        $("#sone").css("background-image","url('"+wallet+".png"+"')");
}

Также, все элементы изменяемые в этой функции - находились во второй веб-странице и были подгружены через fetch. В результате, все изменения по этим селекторам не срабатывают. В чем состоит проблема и есть ли какие-то эффективные методы ее решения?