动态创建的Materialise CSS模式不会触发

Question

以下代码用于生成动态实体化CSS卡，该卡具有一个浮动注释按钮，单击该按钮便会触发实体化模态。当模式触发器静态地属于页面的一部分时，看起来好像该模式触发器可以正常工作，而我又成功地在另一部分上进行了工作。我还在同一页面上尝试了静态模式代码，并且工作顺利。感觉这可能是一个错误。任何帮助表示赞赏。

$("#saved-articles").append(`<div class="card">


    <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="${data[i].link}">
    </div>

     <div class="card-content">
     <span class="card-title activator grey-text text-darken-4 ${truncClass}">${data[i].title}<i class="material-icons right">more_vert</i></span>
     </div>

     <div class="card-reveal">
     <span class="card-title grey-text text-darken-4 ${truncClass}">${data[i].title}<i class="material-icons right">close</i></span>
    <p>${data[i].description}</p>
    <p><a href=""${storyLink}" target="_blank">${readMore}</p>
    <a class="waves-effect waves-light btn " article-id="${data[i]._id}" id="delete-article"  >Unsave Article</a>
    </div>
    <a class="btn-floating halfway-fab waves-effect waves-light blue darken-1 **modal-trigger "href="#modal${i}"**><i class="material-icons" >note_add</i></a> 
    <div **id="modal${i}"** class="modal">
    <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
    </div>
  </div>
    </div>