Materialize.css模態不能在動態創建的元素上正確初始化

Question

我正在使用ajax調用來使用jQuery將行動態追加到表中。 我希望在每一行中生成的按鈕顯示一個模式，其中包含特定於該特定行中項目的數據。

我目前遇到以下問題：

-當我單擊第一和第二按鈕時，模態出現。 但是，當我嘗試關閉第二個模態時，模態中的框陰影不會消失，在刷新頁面之前，我無法繼續單擊任何按鈕。

我查看了Materialize.css文檔，其中提到如果使用觸發器顯示模態，則需要使用$（“。modal-trigger”）。leanModal（）初始化模態。 我用來觸發模式的ID在下面的代碼中稱為“營養事實”。

任何幫助，將不勝感激。 謝謝！！

更新：使用CodePen： http ://codepen.io/mtaggart89/pen/pgbgOB

HTML：

<!-- Modal Structure -->
<div id="nutrition-facts" class="modal modal-fixed-footer">
  <div class="modal-content">
    <h4>Nutrition Facts</h4>
    <p>A bunch of text</p>
  </div>
  <div class="modal-footer">
    <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
</div>

jQuery函數創建元素：

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

jQuery事件監聽器：

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

http://materializecss.com/modals.html

Answer 1

請使用

$(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();
  });

http://codepen.io/anon/pen/YwWwdx