如何在html容器中动态生成的html中调用JavaScript函数

我试图调用一个与HTML容器div中动态生成的列表相关的函数。 My HTML有一个应用程序容器，panel类就在这个容器中，populateCustomerList（）函数的列表就在这里。 正在onkeyup中调用myFunction（），但它返回未捕获的引用错误myFunction（）未定义

我的目标是能够在动态生成的html中进行搜索

HTML:

客户

Javascript:

function populateCustomerList(jsonArr){                
    
    var html = "";
            
    for(var x = 0; x < jsonArr.length; x++){
                                
        html += `
        <ul id="myUL">
            <li customerId = "${jsonArr[x].customerId}">
            <a href="#"><strong>Customer Name:</strong> ${jsonArr[x].customerName} 
            <br><strong>Main Phone:</strong> ${jsonArr[x].mainPhone} 
            <br><strong>Main Email:</strong> ${jsonArr[x].mainEmail}
            <br><strong>Bill To Address:</strong> ${jsonArr[x].mainBillTo1},<br>
                    ${jsonArr[x].mainBillTo2},<br>
                    ${jsonArr[x].mainBillTo3}
                    <br></a>
                    <input type="button" class= "btnEdit" value="EDIT">
                </li>
        </ul>`
    }
    
    var ol = document.createElement("ol");
    ol.innerHTML = html;

    var tableContainer = document.getElementById("customer-list-container");
    tableContainer.innerHTML = "";
    tableContainer.appendChild(ol);

    tableContainer.addEventListener("click", function(evt){
    //populateCardGroupList();
    var target = evt.target;
    //if statement to see if the classList has a button edit
        if(target.classList.contains("btnEdit")){
            //get the id of the card group clicked
            var selectedId = target.closest("li").getAttribute("customerId");
            //get the card group attached to that id and pass it the rest of the json Array of objects
            var selectedCustomer = getCustomerId(selectedId, jsonArr);
            populateCustomerForm(selectedCustomer);
        }
    });
    
}

function myFunction(){
    var input, filter, li, a, i, txtValue;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName('li');
  
    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
      a = li[i].getElementsByTagName("a")[0];
      txtValue = a.textContent || a.innerText;
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
      } else {
        li[i].style.display = "none";
      }
    }
} 

函数populateCustomerList（jsonArr）{
var html=“”；
对于（var x=0；x


`
}
var ol=document.createElement（“ol”）；
ol.innerHTML=html；
var tableContainer=document.getElementById（“客户列表容器”）；
tableContainer.innerHTML=“”；
tableContainer.appendChild（ol）；
tableContainer.addEventListener（“单击”，函数（evt）{
//populateCardGroupList（）；
var目标=evt.target；
//if语句查看类列表是否有编辑按钮
if（target.classList.contains（“btnEdit”））{
//获取已单击的卡组的id
var selectedId=target.closest（“li”）.getAttribute（“customerId”）；
//获取附加到该id的卡组，并将其传递给json对象数组的其余部分
var selectedCustomer=getCustomerId（selectedId，jsonArr）；
PopulateCustomerPerform（选择的客户）；
}
});
}
函数myFunction（）{
var输入、过滤器、li、a、i、TXT值；
输入=document.getElementById（'myInput'）；
filter=input.value.toUpperCase（）；
ul=document.getElementById（“myUL”）；
li=ul.getElementsByTagName（'li'）；
//循环浏览所有列表项，并隐藏与搜索查询不匹配的项
对于（i=0；i-1）{
李[i].style.display=“”；
}否则{
li[i].style.display=“无”；
}
}
} 

根据设计模式，每一条评论都认为

大众客户列表的前端需要分离出
ul
标签，这样所有随附的
li
列表项都有一个
ul
标签

 var html = "";
 
 html += `<ul id="myUL">`;

    for(var x = 0; x < jsonArr.length; x++){
                                
        html += `
            <li customerId = "${jsonArr[x].customerId}">
            <a href="#"><strong>Customer Name:</strong> ${jsonArr[x].customerName} 
            <br><strong>Main Phone:</strong> ${jsonArr[x].mainPhone} 
            <br><strong>Main Email:</strong> ${jsonArr[x].mainEmail}
            <br><strong>Bill To Address:</strong> ${jsonArr[x].mainBillTo1},
                    <br>${jsonArr[x].mainBillTo2},
                    <br>${jsonArr[x].mainBillTo3}
                    <br></a>
                    <input type="button" class= "btnEdit" value="EDIT">
                </li>`;
    }

html += `</ul>`;

var html=”“；
html+=``；
对于（var x=0；x
`；
}
html+=``；
根据设计模式，每一条评论都认为
大众客户列表的前端需要分离出
ul
标签，这样所有随附的
li
列表项都有一个
ul
标签

 var html = "";
 
 html += `<ul id="myUL">`;

    for(var x = 0; x < jsonArr.length; x++){
                                
        html += `
            <li customerId = "${jsonArr[x].customerId}">
            <a href="#"><strong>Customer Name:</strong> ${jsonArr[x].customerName} 
            <br><strong>Main Phone:</strong> ${jsonArr[x].mainPhone} 
            <br><strong>Main Email:</strong> ${jsonArr[x].mainEmail}
            <br><strong>Bill To Address:</strong> ${jsonArr[x].mainBillTo1},
                    <br>${jsonArr[x].mainBillTo2},
                    <br>${jsonArr[x].mainBillTo3}
                    <br></a>
                    <input type="button" class= "btnEdit" value="EDIT">
                </li>`;
    }

html += `</ul>`;

var html=”“；
html+=``；
对于（var x=0；x
`；
}
html+=``；
您是否尝试过在js而不是html中添加事件处理程序？const myInput=document.getElementById（'myInput'）；addEventListener（'keyup'，function（）{myFunction（）}）；我尝试过使用document.getElementById，并将myFunction（）传递给它，但它不起作用。好吧，当它不起作用时：什么具体不起作用，myFunction是否仍然未定义？因此它实际上部分起作用，我只是在搜索列表中的第一项。搜索时，结果有点接近，但当我键入搜索时，并非所有其他结果都隐藏起来。我相信，您的问题在于执行
html+=…
时如何构建列表。对于每个项目，您都在构建
。
，而不是
。
。因此，myFunction只拾取第一个
，它只包含一个
…您是否尝试过在js而不是html中添加事件处理程序？const myInput=document.getElementById（'myInput'）；addEventListener（'keyup'，function（）{myFunction（）}）；我尝试过使用document.getElementById，并将myFunction（）传递给它，但它不起作用。好吧，当它不起作用时：什么具体不起作用，myFunction是否仍然未定义？因此它实际上部分起作用，我只是在搜索列表中的第一项。搜索时，结果有点接近，但当我键入搜索时，并非所有其他结果都隐藏起来。我相信，您的问题在于执行
html+=…
时如何构建列表。对于每个项目，您都在构建
。
，而不是
。
。因此，myFunction只接收第一个
，它只包含一个
…非常有效，非常感谢您的帮助！我也理解这个代码！很好，非常感谢你的帮助！我也理解这个代码！