Apply function to an initially hidden element

Apply function to an initially hidden element

I'm trying to do something that should be very simple here-slide/toggle the menu items in the MOBILE menu. This mobile menu is initially hidden on a wide screen upon load. On resize (making the screen smaller), the Hamburger pops in and when it's clicked, the mobile menu appears. That's fine. 

I'm trying to slide toggle the submenu items. BUT ... I can't even get the mobile  menu to respond to the function to show text in the console log.  I thought I could use the on function to attach functions to initially hidden elements.

The following function works until I assign it to an element that was hidden on page load eg. when I The bottom line:  The bottom line:  How do I assign a function to an element that is hidden on page load? Am I misunderstanding the on function?

Here's the link:

Here's the testing code:

jQuery( "ul#mobile_menu" ).on( "mouseover", function() {
console.log('yes i see you');
});