Javascript 未触发ECSS模式事件

我试图在模态打开时执行一些东西，但它根本不会触发事件

  $('.modal').modal({
   onOpenStart: function(){
    console.log("it works!");
   }
  });

HTML

或者，如果你想在vanillaJS中这样做，你可以这样称呼他们

document.addEventListener('DOMContentLoaded', function () {
    const optionsModal = {
            onOpenStart: () => {
                console.log("Open Start");
            },
            onOpenEnd: () => {
                console.log("Open End");
            },
            onCloseStart: () => {
                console.log("Close Start");
            },
            onCloseEnd: () => {
                console.log("Close End");
            }
        }
    var Modalelem = document.querySelector('.modal');
    var instanceModal = M.Modal.init(Modalelem, optionsModal);
});

---

谢谢你的回答！不幸的是，它也不起作用。我认为它根本没有注册模态。你的建议和我以前的尝试都是一样的。它甚至可以在没有任何模式注册的情况下工作。好吧，那么，你能把你所有的代码都放在一个代码笔里，让我们检查一下吗？我不能复制准确的代码，但我可以尝试重新构建它。当然，你用的是什么版本的jQuery，materialize？我刚刚在我的项目中试用过，效果非常好。我想我只需要调试我的项目。非常感谢您的时间和帮助！

$(document).ready(function () {
    $('.modal').modal({
        onOpenStart() {
            console.log("Open Start");
        },
        onOpenEnd() {
            console.log("Open End");
        },
        onCloseStart(){
            console.log("Close Start");
        },
        onCloseEnd(){
            console.log("Close End");
        },
    });
});

document.addEventListener('DOMContentLoaded', function () {
    const optionsModal = {
            onOpenStart: () => {
                console.log("Open Start");
            },
            onOpenEnd: () => {
                console.log("Open End");
            },
            onCloseStart: () => {
                console.log("Close Start");
            },
            onCloseEnd: () => {
                console.log("Close End");
            }
        }
    var Modalelem = document.querySelector('.modal');
    var instanceModal = M.Modal.init(Modalelem, optionsModal);
});