JQuery not able to get dynamic HTML element

Question

I have this problem in JQuery and I can't seem to get past this issue. I have a dynamically generated list of Li elements, and for each Li element I want to attach an On Hover so that a dropdown shows below the Li element. The catch is the Li elements are generated dynamically.

I have tried using .on("hover"), but nothing triggeres the event. The following is my code.

//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
  }
})

Answer 1

Try this syntax:

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