Looking for Javascript / jQuery Event trigger

Question

I have got a javascript based menu generator that is from an external source. The menu functionality occurs via a click event bound to a specific ID... pretty standard.

What I want to do is perform another action on the DOM AFTER that click event fires.

I would rather not hack the code that came in the menu package.

I tried attaching my own click handler - but there isn't an obvious way of ensuring my click handler fires AFTER the menu system's handler. One approach I considered was basing an event on the addition/removal of a class that occurs with the menu system's click handler. But - I quickly found that there is no event based on the change of class on an element (that I know of).

Any ideas? (without hacking the original menu system's js)

This might be helpful (Look at the updated part of the answer): https://stackoverflow.com/a/19401707/6400614 — Rahul Bharadwaj, Sep 21 '19 at 16:28
Thank you for the quick response. I saw that - or one similar. I don't think it will work because it is the Navigation System that actually changes the class. Yes - if I was changing the class, I wouldn't need another handler, I'd just do the additional work on the DOM then and there :) — sea26.2, Sep 21 '19 at 16:43

score 1 · Accepted Answer · 2019-09-21T17:51:21.267

You can use the javascirpt Mutation Observer, here is a great article about the subject : Listening to the DOM changes with MutationObserver

OR in an old fashion

If I understand, (1) you can add your own click event listener, (2) you want execute your code after a class name change on the menu element.

In that case, you can use a setInterval to check if the class has changed and if so, trigger your action.

Something like that :

myOnClickFunction(){

    var menu = document.querySelector('#MyMenuID');

    var timer = setInterval(() => {

        if(menu.classList.contains('TheClassNameYouWantToCheck')){
            //Clear the interval 
            clearInterval(timer);

            //Execute your actions here

        }

    }, 50);


    //You can also add a maximum checking  time
    //after 5 seconds the function stop checking for changes
    setTimeout(()=>clearInterval(timer), 5000);

}

Both sound like good ideas. I'm curious about the Mutation Observer. I did see that but it seemed like dropping a 1000 lb bomb when a mousetrap would do the trick :) Never thought of setInterval... I could use it here or elsewhere. — sea26.2, Sep 21 '19 at 18:20

Looking for Javascript / jQuery Event trigger

1 Answers1