javascript - 使用 jquery.append() 附加一个类为 "modal-trigger"的 div 不起作用

Question

我有一个使用 materializecss 的名为“modalcreatelist”的模态。当使用 href 标签点击某些 div 时，将触发模态。

<div id="modalcreatelist" class="modal"> 
  <div class="modal-content"> 
    <div class="col s12 m6 l12"> 
      <div class="row"> 
        <h6><b>Create a list..</b></h6> 
          <div class="divider"></div> <p>Title</p> 
          <input type="text" placeholder="Title.." id="listTitle"> 
          <input type="hidden" id="hiddenListId" value="<?php foreach($board as $r) {echo $r->boardId;}?>"> 
      </div> 
    </div> 
    </div> 
      <div class="modal-footer"> <a class="waves-effect waves-red btn-flat modal-action modal-close">Close</a> <a class="waves-effect waves-red btn-flat modal-action modal-close" onclick="createList()">Save</a> 
    </div> 
</div>

所以我使用这段 html 代码来触发模态，效果非常好

<div id="invoice-line" class="left-align white-text">
   <a href="#modalcreatelist" class="modal-trigger white-text">Add a List..
   </a>
</div>

然而，当我将代码移动到我的 javascript 文件时，我尝试使用 jquery .append() 附加 div 它不工作 类“modal-trigger”根本没有加载 网址显示为“localhost/project#modalcreatelist”

$("#divCreateList").append'(<div id="invoice-line" class="left-align white-text"><a href="#modalcreatelist" class="modal-trigger white-text">Add a List..</a></div>')

Answer 1

将modal-trigger添加到DOM后需要重新绑定(bind)。它第一次工作是因为绑定(bind)是根据 document.ready 上的类名完成的。您需要为点击 modal-trigger 添加一个事件监听器，并添加打开您的模式的逻辑。

也就是说，在通过 JavaScript 添加内容之后。你必须写一些类似的东西。 $('.modal-trigger').on('click', function() { 打开模式; })

用你的逻辑替换'open modal'。