Javascript Materialize.css模式未在动态创建的元素上正确初始化

我使用ajax调用使用jQuery将行动态附加到表中。我希望在每一行中生成的按钮显示一个模式，其中包含特定于该行中项目的数据

我目前遇到以下问题：

-当我单击第一和第二个按钮时，会显示模式。但是，当我尝试关闭第二个模式时，模式的框阴影不会消失，在刷新页面之前，我无法继续单击任何按钮

我查看了Materialize.css文档，其中提到如果使用触发器显示模态，我们需要使用$（“.modal trigger”）.leanmodel（）初始化模态。我用来触发模式的ID在下面的代码中称为“营养事实”

任何帮助都将不胜感激。谢谢

更新：使用代码笔：

HTML:

---

请使用

$(document).on('click', '.nutrition', function(e) {
    e.preventDefault();
    var ndbNumber = $(this).attr('data-ndbnum');
    //you have to trigger modal like this
    //$(".modal-trigger").leanModal();
    $('#nutrition-facts').openModal();
  });

---

你能为这个做小提琴吗？

function buildTable(foodData) {
  var itemList = foodData.list.item;
  var foodGroup, foodName, newDiv, createButton, ndbNumber, createTable, tableHead, categoryHeading, nameHeading, tr;
  $("table").addClass("bordered");
  categoryHeading = $("<th>").html("Category");
  nameHeading = $("<th>").html("Name");
  $("thead").append(categoryHeading).append(nameHeading);       
  for (var i = 0; i < itemList.length; i++) {
    foodGroup = $("<td>").html(itemList[i].group);
    foodName = $("<td>").html(itemList[i].name);
    ndbNumber = itemList[i].ndbno;
    newDiv = $("<td>");
    createButton = $("<a>")
                    .addClass("waves-effect waves-light btn cyan nutrition modal-trigger")
                    .attr("href", "#nutrition-facts")
                    .html("Nutrition Facts")
                    .attr('data-ndbnum', ndbNumber);
    addButton = newDiv.append(createButton);
    tr = $("<tr>").append(foodGroup).append(foodName).append(addButton);
    $("tbody").append(tr);
  }
}

$(document).on('click', '.nutrition', function(e){
  e.preventDefault();
  var ndbNumber = $(this).attr('data-ndbnum');
  $(".modal-trigger").leanModal();
});

$(document).on('click', '.nutrition', function(e) {
    e.preventDefault();
    var ndbNumber = $(this).attr('data-ndbnum');
    //you have to trigger modal like this
    //$(".modal-trigger").leanModal();
    $('#nutrition-facts').openModal();
  });