JS initiating correctly, but still won't run unless I put it into the console

Question

I have this running after I have output my markup (just before the </body>:

$(document).ready(function() {
.....
    focusLeaving: function(){
                    e('#running');
                    $('.levelThree').on('mouseleave',function () {
                        e('remove');
                        MM.internalMenu.levelFive.close(function(){});
                        MM.internalMenu.levelThree.close($(this));
                        $(this).parent().removeClass('active');
                    });
                }
    //This outputs as expect: '#running'
....
});

However leaving a .levelThree nothing will happen. If I run the above code inside the console or even run the function itself via the console MM.internalMenu.levelThree.focusLeaving(); the the function works accordingly.

This is confused me no end, I know it should work. I even know its running, so why won't it work....

Where does the `MM` come from? What frameworks/libraries are you using apart from jQuery? — 11684, Mar 11 '13 at 10:09
Only jQuery running. MM is just a `object` that i have created to hold all of my functions etc. `var MM = {};` — Jamie Hutber, Mar 11 '13 at 10:11
looks like timing, try adding some kind of dom ready callback and execute your code there. — Frances McMullin, Mar 11 '13 at 10:15
My thoughts exactly, however i have already wrapped it with `.ready()` — Jamie Hutber, Mar 11 '13 at 10:36
@JamieHutber Then perhaps this object `MM` is in the local scope of `.ready()`'s anonymous function. — 11684, Mar 11 '13 at 10:43
can you post the html so we can see the order you are loading your scripts? — Tomer, Mar 11 '13 at 11:18

score 0 · Answer 1 · answered Mar 11 '13 at 10:19

0

Have you wrapped your script in $(document).ready(function() { ... }? By running your JS functions after the DOM is ready will probably make your script work again, assuming that MM has been defined.

According to the official documentation:

The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code

answered Mar 11 '13 at 10:19

Terry

63,248
15
96
118

@JamieHutber I suspect that you're not declaring the method properly. What about using `$.fn.extend({ focusLeave: { ... } });` See this - http://stackoverflow.com/questions/1117086/how-to-create-a-jquery-plugin-with-methods – Terry Mar 11 '13 at 11:37

score 0 · Accepted Answer · answered Mar 11 '13 at 12:44

Using the on function means you are binding an event to a callback handler. $('.levelThree').on('mouseleave',function () { .... } equates to saying "From now on, when a mouseleave event is triggered on the item, do this function".

The function itself will not be executed at that point in time, it will only be set up to execute when a mouseleave event occurs.

To explain further:

<a id="my_link" href="#"> click me! </a>

When you click this, not much happens. Suppose you want it to say You clicked me! when you click on it. You'll need to set it up using the on function.

$("#my_link").on('click', function {
    alert("You clicked me!");
});

Note that you still haven't seen an alert box with the message. You have only set up the alert box to be shown on a click. If you click the link, only then will you see the alert box.

What's important to note is that setting up an event handler does not trigger the event itself. However, if you run that code in the console, it will be directly executed. That explains why your code is working when run in the console.

I assume the focusLeaving is an event that fires when a mouse leaves the item? In that case, the easiest way to fix this is by removing the on function, as there is already an event firing and executing. You're setting it up twice, which is what causing the issue you're facing.

Thanks for the reply, I was slightly embarrassed to comment further once I realised that my `.on` was not set up correctly. Still got it working and felt dirty — Jamie Hutber, Mar 12 '13 at 10:47

JS initiating correctly, but still won't run unless I put it into the console

2 Answers2