嘗試打開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();\">

編輯：在另一個答案中，有人提到必須首先初始化模態，例如通過使用以下代碼段：

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