MaterializeCSS modal events not firing

Question

Im trying to execute some stuff while the modal is opening but it wont fire the event at all.

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

Answer 1

HTML

<a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a>


<div id="modal1" class="modal">
    <div class="modal-content">
        <h4>Modal Header</h4>
        <p>A bunch of text</p>
    </div>
</div>

Try calling functions like this in jQuery.

$(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");
        },
    });
});

Or if you want to do in vanillaJS then you can call them like this

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);
});