物化模态不工作答案

【问题标题】：Materialize Modals Not Working物化模态不工作
【发布时间】：2018-06-01 20:53:00
【问题描述】：

我正在用 php 和 html 构建一个简单的博客应用程序，当我使用数据库数据生成我的模态（使用 javascript fetch() 命令）时，模态触发器不起作用。这是生成代码： Javascript：

function RetrieveArticles() {
  fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
    document.getElementById('container-articles').innerHTML = data;
  })
}

php：

require('../../settings.php');

  try{
    /* Create a new PDO object */
    $connect = new PDO("mysql:host=$databaseHost;dbname=$databaseName",
    $databaseUser, $databasePassword);
    /* set the PDO error mode to exception */
    $connect->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

  } catch(PDOException $e){
    /* Redirect the user with errorcode 1: "Database settings are incorrect" */
    header('location: ../pages/error.php?errcode=1');
    exit();
  }

  $stmnt = $connect->prepare("SELECT * FROM blog_articles NATURAL JOIN article_text;");
  $stmnt->execute();
  $result = $stmnt->fetchAll(PDO::FETCH_ASSOC);
  if(count($result) > 0){
    foreach($result as $data){
      echo "<div class='row'>";
        echo "<div class='collection container-collection'>";
          echo "<a class='blog-clicker modal-trigger' href='#$data[article_id]'>";
            echo "<p>"."<span class='article-title'>".$data['article_name']."</span>"."<br/>"."By ".$data['article_user'].", ".$data['article_made']."</p>";
          echo "</a>";
        echo "</div>";
      echo "</div>";
      echo "<div id='$data[article_id]' class='modal'>";
        echo "<div class='modal-content'>";
          echo "<h5>".$data['article_name']."</h5>";
          echo "<p>".$data['article_text']."</p>";
        echo "</div>";
        echo "<div class='modal-footer'>";
          echo "<div class='divider'></div>";
          echo "<button type='button' class='modal-close btn left indigo darken-3'>"."Close Article"."</button>";
        echo "</div>";
      echo "</div>";
    }
  }else{
    echo "<p class='center-align'>"."No Articles Found"."</p>";
  }

这就是我在网络浏览器中的显示方式：

<div id="blog-wrapper">
  <div class="c-12" id="container-articles">
    <div class="row">
      <div class="collection container-collection">
        <a class="blog-clicker modal-trigger" href="#art1527884499GuylianWasHier">
          <p><span class="article-title">Test Modal 1</span><br>By GuylianWasHier, 2018-06-01 20:21:39</p>
        </a>
      </div>
    </div>
    <div id="art1527884499GuylianWasHier" class="modal">
      <div class="modal-content">
        <h5>Test Modal 1</h5>
        <p>This is a simple modal test</p>
      </div>
      <div class="modal-footer">
        <div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
    </div>
    <div class="row">
      <div class="collection container-collection">
        <a class="blog-clicker modal-trigger" href="#art1527884802GuylianWasHier">
          <p><span class="article-title">12</span><br>By GuylianWasHier, 2018-06-01 20:26:42</p>
        </a>
      </div>
    </div>
    <div id="art1527884802GuylianWasHier" class="modal">
      <div class="modal-content">
        <h5>12</h5>
        <p>12</p>
      </div>
      <div class="modal-footer">
        <div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
    </div>
    <div class="row">
      <div class="collection container-collection">
        <a class="blog-clicker modal-trigger" href="#art1527884806GuylianWasHier">
          <p><span class="article-title">1234</span><br>By GuylianWasHier, 2018-06-01 20:26:46</p>
        </a>
      </div>
    </div>
    <div id="art1527884806GuylianWasHier" class="modal">
      <div class="modal-content">
        <h5>1234</h5>
        <p>1243</p>
      </div>
      <div class="modal-footer">
        <div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
    </div>
    <div class="row">
      <div class="collection container-collection">
        <a class="blog-clicker modal-trigger" href="#art1527885314GuylianWasHier">
          <p><span class="article-title">23</span><br>By GuylianWasHier, 2018-06-01 20:35:14</p>
        </a>
      </div>
    </div>
    <div id="art1527885314GuylianWasHier" class="modal">
      <div class="modal-content">
        <h5>23</h5>
        <p>23</p>
      </div>
      <div class="modal-footer">
        <div class="divider"></div><button type="button" class="modal-close btn left indigo darken-3">Close Article</button></div>
    </div>
  </div>
  <div class="row">
    <!-- Form -->
    <div class="collection container-collection">
      <a class="modal-trigger blog-clicker" href="#createnewarticle">
        <p id="title-createnewarticle">Create New Article</p>
      </a>
    </div>
  </div>

模态框由具有自动初始化功能的脚本初始化（该脚本正确加载到网页中，因为没有由 php 生成的模态框可以正常工作）。有谁知道如何解决这个问题？。

如果你想更好地看代码，这里是github repo：https://github.com/GuylianWasHier/Blog.php

【问题讨论】：

标签： php html materialize

【解决方案1】：

document.getElementById('container-articles').innerHTML = data; 之后必须重新初始化模态框

试试这个

function RetrieveArticles() {
 fetch('blog-php/inc/blogOverview/retrieveArticles.php').then(response => response.text()).then(data => {
  document.getElementById('container-articles').innerHTML = data;
  // you can destroy previous instances instance.destroy();
  var elems = document.querySelectorAll('.modal');
  var instances = M.Modal.init(elems, {});
 })
}

【讨论】：