尝试打开Materialize Modal时为什么会出现此错误？

Question

我正在尝试展示一些足球器材，但是我在努力打开Modals方面很挣扎。在每周的每场比赛中，我都想打开一个模式，在该模式下应显示有关相应游戏的更多信息。但是，每当我按下任何一个应该在创建的第一个按钮之外打开模式的按钮时，控制台中都会出现错误。在“检查”菜单中，我可以看到已创建模态，并且对于每个模态都存在一个唯一的按钮。但是模态不会显示在屏幕上。

控制台错误

Uncaught TypeError: Cannot read property 'open' of undefined
at HTMLDivElement.<anonymous> (materialize.js:1146)
at Function.each (jquery-2.1.1.min.js:2)
at n.fn.init.each (jquery-2.1.1.min.js:2)
at n.fn.init.jQuery.fn.<computed> [as modal] (materialize.js:1144)
at HTMLAnchorElement.onclick (VM3532 etapa:274)
(anonymous) @ materialize.js:1146
each @ jquery-2.1.1.min.js:2
each @ jquery-2.1.1.min.js:2
jQuery.fn.<computed> @ materialize.js:1144
onclick @ VM3532 etapa:274

我在模态中回显的PHP代码

$i = 1;
$j = 1;
foreach ($games as $rounds) {
    echo "<div id='et$i' class='tabcontent'>";
    echo "<ul class='collection'>";

    foreach ($rounds as $match) {
        echo "<li class='collection-item'>";
            echo "<div class='row'>";
            echo "<div class='center col s4'>{$match[1]}</div>";
            echo "<div class='center col s1'>-</div>";
            echo "<div class='center col s4'>{$match[0]}</div>";
            echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal('open');\"> <i class='material-icons'>assessment</i> </a>";
            echo "</div>";

            echo "<div id='modal$j' class='modal'>";
            echo "<div class='modal-content'>";
            echo "<div class='row'>";
            echo "<div class='center col s4'>$match[1]</div>";
            echo "<div class='center col s1'>-</div>";
            echo "<div class='center col s4'>$match[0]</div>";
            echo "</div>";

            echo "</div>";
            echo "</div>";
        echo "</li>";
        $j++;
    }
    echo "</ul>";
    echo "</div>";
    $i++;
}

Answer 1

使用Laravel的默认app.css和app.js，当您删除“打开”一词时，您的代码将正常工作

echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal('open');\">

成为

echo "<a href='#meci$j' class='secondary-content' onclick=\"$('#modal$j').modal();\">

编辑：在another answer中，有人提到必须首先初始化模态，例如，使用以下代码段：

<script>
    $(document).ready(function() {
        $('#modal1').modal();
    });
</script>