Javascript 动态创建的按钮

我正在学习javascript，并尝试访问在函数中动态创建的按钮。第一个函数createHtml只获取数据并创建元素，并将它们存储在一个变量中，我将其添加到html元素中，并将它们存储在beerContainer中，这样做就可以了。但是，我无法访问在函数createHtml中创建的按钮。当我点击saveBeer时，如何让警报弹出

 let btn = document.querySelector('#myBtn');
    let beerContainer = document.querySelector('#beer-data');

            function createHtml(result) {
            
              var html = '';
              for(let i = 0; i < result.data.length; i++) {
               
              
                html +=  "<h3>"+ result.data[i].name +"</h3>"
                html +=  "<p>"+ result.data[i].description +"</p>"
                html += "<button id='save-beer' data-id='"+ result.data[i].id+"'>Save Beer</button>"
            
              }
              beerContainer.innerHTML = html;
            }
            
            
            btn.addEventListener('click', function(event) { 
              fetchApiData(createHtml);
            });

var saveBeer = document.querySelector('.save-beer');

saveBeer.addEventListener('click', function(event) { 
 alert("Hi");

});

let btn=document.querySelector（'#myBtn'）；
让beerContainer=document.querySelector（“#啤酒数据”）；
函数createHtml（结果）{
var html=''；
for（设i=0；i”
html+=“保存啤酒”
}
beerContainer.innerHTML=html；
}
btn.addEventListener（'click'，函数（事件）{
fetchApiData（createHtml）；
});
var saveBeer=document.querySelector（'.saveBeer'）；
saveBeer.addEventListener（'click'，函数（事件）{
警报（“Hi”）；
});

尝试使用

    var saveBeer = document.querySelector('#save-beer'); // access by id

而不是

   var saveBeer = document.querySelector('.save-beer'); // trying to access by class which does not exist

请注意querySelector参数中的“#”而不是“.”