查询选择器查找动态元素

我试图用查询选择器来获取.btn-viewdetail按钮，但是函数只会获取我手动创建的按钮，而不是动态创建的按钮。我不知道为什么，它们都具有相同的类名。

是否由于扭曲输入按钮？

有谁能解决这个问题？

window.onload=function(){
    this.getPerson();
    this.document.getElementById('getPerson').addEventListener('click', this.getPerson);
    //this.document.getElementById('deletePerson').addEventListener('click', this.deletePerson);
}

function createNode(element) {
    return document.createElement(element);
}

function append(parent, el) {
  return parent.appendChild(el);
}

const ul = document.getElementById('person');
const url ='http://localhost:8080/person';
var x = 1;



function getPerson(){
//addButton.value = "+";
//addButton.class = "btn btn-success";
$("#output1 tbody tr").remove();
fetch(url)
    .then(res => res.json())
    .then(data => {

        //console.log(data);

        var temp = "";
        data.forEach((person) => {
            temp += "<tr>";
            temp += "<td>" +person.id+"</td>";
            //console.log(person.id);
            temp += "<td>" +person.vorname+"</td>";
            temp += "<td>" +person.nachname+"</td>";
            temp += "<td>"
            person.projectList.forEach((project) => {
              temp += project.name+"<br>";
            });
            temp += "</td>"

            temp += "<td>"
            person.technoList.forEach((techno) => {
              temp += techno.name+"<br>";
            });
            temp += "</td>"

            /*id='addButton" + x + "'*/


            temp += "<td>" + addButton(person.id)+ "</td>"
             //this.parentElement.appendChild(this)
             x++;


            //document.getElementById('personDetail_Button').addEventListener('click', this.personDetail(person.id));
            temp += "</tr>"


        });

        document.getElementById("tableOutput").innerHTML= temp;

    });
}

function addButton(person_id){
  var element = document.createElement("input");
  element.type = 'button';
  element.value = 'test123';
  element.setAttribute("data-person_id",person_id);
  element.setAttribute("class","btn-viewdetail btn btn-primary");

  var _wrap = document.createElement("div");
  _wrap.appendChild(element);

 return _wrap.innerHTML;

}



document.body.innerHTML += addButton(4);


function personDetail(person_id_request){
 //console.log(person_id_request);
 fetch('http://localhost:8080/person/' + person_id_request)
    .then(res => res.json())
    .then(data => {

     console.log(data);
   });
}

function deletePerson(){
var id = document.getElementById('id_delete').value;
var id_input = document.getElementById('id_delete');
fetch('http://localhost:8080/person/' + id, {
    method: 'DELETE',
    })
    .then(res => {
        console.log(res.status)
        if(res.status == 200){
            alert("Die Person mit der ID " +id +" wurde gelöscht");
            getPerson();
            }else{
                alert("Leider konnten wir die Person nicht löschen, hast du vielleicht die falsche ID angegeben? " + res.status)

            }
        res.json();
        $('#id_delete').reset;
    })
    .then((data) => {
    })
}

var _btns = document.querySelectorAll(".btn-viewdetail");
console.log(_btns);
_btns.forEach(function (el) {
  el.addEventListener('click',function(evt){
    console.log(evt.target.getAttribute("data-person_id"));
    personDetail(evt.target.getAttribute("data-person_id"));
  });
});