Materialize.css模态不能在动态创建的元素上正确初始化

Question

I'm using an ajax call to append rows dynamically to a table using jQuery. I would like the button generated in each row to display a modal with data specific to the items in that particular row.

I am currently running into the following issue:

-The modal appears when I click on the 1st & 2nd buttons. However, when I try to close out of the 2nd modal, the box shadow from the modal does not go away, and I can no longer continue clicking on any buttons until I refresh the page.

I checked the Materialize.css documentation and it mentions that we need to initialize the modal with $(".modal-trigger").leanModal() if using a trigger to show a modal. The ID that I am using to trigger the modal is called "nutrition-facts" in the code below.

Any help would be appreciated. Thanks!!

UPDATE: With 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 to Create Elements:

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 Event Listener:

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

http://materializecss.com/modals.html

Answer 1

Please change code with

$(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