Javascript JQuery无法获取动态HTML元素

我在JQuery中遇到了这个问题，我似乎无法解决这个问题。 我有一个动态生成的Li元素列表，对于每个Li元素，我希望附加一个悬停状态，以便在Li元素下面显示一个下拉列表。关键在于Li元素是动态生成的

我尝试过使用.on（“悬停”），但没有任何触发事件。下面是我的代码

//On Init
$( document ).ready(function() {
  generateList();

  $(".app").on("hover", function () {
    console.log('test'); //Does not trigger
  });
  $(".app").on("mouseenter", function () {
    console.log('test'); //Does not trigger
  });
});

//Load JSON file to generate app listing
function generateList(){

  //Load JSON file
  $.getJSON('json/adapters.json', function (json) {
    var listCol = 5;
    var ul = $('#container-apps');

    //Generate app list from adapters.JSON
    json.adapters.forEach(function (adapter) {

      //Count adapter for no result function
      adapterCount += 1;

      var link = adapter.link;
      var git = adapter.git;
      var img = adapter.image;
      var name = adapter.name;

      //Appending the HTML elements  
      //List element  
      var li = $("<li>").attr("class", "app").appendTo(ul);
      var a = $("<a>").attr({
        "href": "javascript:void(0);",
        "target":"_blank",
        "class":"app-link",   
      }).appendTo(li);

      var image = $("<img>").attr("src", img).appendTo(a);
      var label = $("<div>").attr("class", "item-name black-font").html(name).appendTo(a);

      //Hover element  
      var hoverContainer = $("<div>").attr("class", "hoverContainer").appendTo(li);
      var hoverUL = $("<ul>").appendTo(hoverContainer);
      var hoverPageLi = $("<li>").appendTo(hoverUL);
      var hoverPageA = $("<a>").attr({"href": link, "target":"_blank", "class":"app-link"}).html("SDK").appendTo(hoverPageLi);
      var hoverGitLi = $("<li>").appendTo(hoverUL);
      var hoverGitA = $("<a>").attr({"href": git, "target":"_blank", "class":"app-link"}).html("Github").appendTo(hoverGitLi);
    });

    //Generate dummy box for responsive
    for (var i = 0; i < (listCol); i++) {
      $('<li class="item flex-dummy"></li>').appendTo(ul);
    }
  });
}

$(function () {
  $(".app").hover(){
    console.log('test'); //Does not trigger
  }
})

//在Init上
$（文档）.ready（函数（）{
生成论者（）；
$（“.app”）。在（“悬停”，函数（）{
console.log（'test'）；//不触发
});
$（“.app”）。在（“鼠标指针”，函数（）{
console.log（'test'）；//不触发
});
});
//加载JSON文件以生成应用程序列表
函数生成列表（）{
//加载JSON文件
$.getJSON（'json/adapters.json'，函数（json）{
var-listCol=5；
var ul=$（“#容器应用程序”）；
//从adapters.JSON生成应用程序列表
forEach（函数（适配器）{
//无结果函数的计数适配器
适配器计数+=1；
var link=adapter.link；
var git=adapter.git；
var img=adapter.image；
var name=adapter.name；
//附加HTML元素
//列表元素
var li=$（“
”）.attr（“类”、“应用”）.appendTo（ul）；
变量a=$（“”）。属性({
“href”：“javascript:void（0）；”，
“目标”：“空白”，
“类”：“应用程序链接”，
}).附件（李）；
var image=$（“”）.attr（“类”，“项目名称黑色字体”）.html（名称）.appendTo（a）；
//悬停元素
var hoverContainer=$（“”）.attr（“类”，“hoverContainer”）.appendTo（li）；
var hoverUL=$（“
”）.appendTo（hoverContainer）；
var hoverPageLi=$（“
”）.appendTo（hoverUL）；
var hoverPageA=$（“”）.attr（{“href”：link，“target”：“\u blank”，“class”：“app link”}）.html（“SDK”）.appendTo（hoverPageLi）；
var hoverGitLi=$（“
”）.appendTo（hoverUL）；
var hoverGitA=$（“”）.attr（{“href”：git，“target”：“\u blank”，“class”：“app link”}）.html（“Github”）.appendTo（hoverGitLi）；
});
//生成响应的虚拟框
对于（变量i=0；i<（列表列）；i++）{
$（'li class=“item flex dummy”>
）。附录（ul）；
}
});
}
$（函数（）{
$（“.app”）.hover（）{
console.log（'test'）；//不触发
}
})

尝试以下语法：

$("body").on("click", ".app", function(){
   //do something
});

---

你需要用“谢谢”这个词，这个词很有用！别忘了把它标为已回答；）