使用 jquery.append() 附加一个带有“modal-trigger”类的 div 不起作用答案

【问题标题】：append a div with class "modal-trigger" using jquery.append() not working使用 jquery.append() 附加一个带有“modal-trigger”类的 div 不起作用
【发布时间】：2018-08-16 11:55:45
【问题描述】：

我有一个使用 materializecss 的名为“modalcreatelist”的模态。当使用 a 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”类 url 显示为 '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>')

【问题讨论】：

#somediv 在哪里？而且，您是否在 body 标记的末尾添加了您的脚本引用，但在您的 JQuery 脚本引用之后？
“somediv”在哪里？需要在前面加#才能按id选择。
对不起，“somediv”实际上是 $("#divCreateList")
@ScottMarcus 我把我的 js 文件放在标签上，我所有的 js 文件
那么你必须将你的JQuery代码放在document.ready()回调中。

标签： javascript jquery html css materialize

【解决方案1】：

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

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

用您的逻辑替换“打开模式”。

【讨论】：

或者，您可以只使用事件委托，然后您不必重新绑定。
如果默认行为不使用事件委托，他仍然需要重新绑定（并想出打开模式的逻辑），然后可能会使用事件委托来避免再次需要重新绑定。跨度>
这很简单，获取 modal-trigger 的 href 属性并使用它来识别您的模态，然后查找处理您的模态的库的原生 JavaScript 方法。（如何初始化，然后打开）。
如果原始事件绑定是通过事件委托完成的，则不需要进一步绑定。
@ScottMarcus，如果初始行为使用事件委托，它会起作用。