Js使搜索功能无法处理来自数据库的动态创建内容

Question

<% include layouts/header %>
<link rel="stylesheet" href="/stylesheets/ac.css">
<h1>Downloads available</h1>
<br><br>
<input type="text" id="myInput" placeholder="Search for names..">
<br><br>
<div class="row" id = "row">
  <%
  if(output){
  siz = output.length;
  for(i=0;i<siz;++i){
  %>
    <div class="col-sm-6 col-md-4" id = "col">
      <div class="thumbnail">
        <img src = "<%= output[i].logo %>" alt="...">
        <div class="caption">
          <h3><%= output[i].name %></h3>
          <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
          <p id = "clk"><a href="/pages/<%= output[i].lid %>" style= "width:100%;" class="btn btn-primary" role="button">Button</a></p>
        </div>
      </div>
    </div>
  <%
  }
}else{
  console.log("ERror");
}
  %>
</div>
<script type="text/javascript">
$(document).ready(function(){
  function myFunction() {
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    col = document.getElementById("col");
    li = col.getElementsByClassName('thumbnail');

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        h = li[i].getElementsByTagName("h3")[0];
        if (h.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
  }

  $("#myInput").on("keyup",function(){
    myFunction();
  });

  $("p").on("click",function(){
    window.open('http://facebook.com', '_blank');
  });
});

</script>
<% include layouts/footer %>

在这个页面中，我创建了一个搜索栏，可以搜索页面上动态创建的内容。但它不适用于所有缩略图。它仅搜索第一个缩略图，对其他缩略图没有影响。

我知道在HTML之前加载javascript ...所以我使用了$（document）.ready函数来加载HTML之后的javascript。

我也有一个使用＆＃34; .on＆＃34;的解决方案。事件处理程序，但它没有帮助。结果保持不变。