Question

我在JQuery中遇到此问题，但似乎无法解决此问题。我有一个动态生成的Li元素列表，并且我想为每个Li元素附加一个悬停鼠标，以便在Li元素下方显示一个下拉列表。难点是Li元素是动态生成的。

我尝试使用.on（“ hover”），但是没有触发事件。以下是我的代码。

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

尝试以下语法：

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

jQuery无法获取动态HTML元素

1 个答案: