Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Using the <code>on</code> function means you are binding an event to a callback handler. <code>$('.levelThree').on('mouseleave',function () { .... }</code> equates to saying "From now on, when a mouseleave event is triggered on the item, do this function".</p> <p>The function itself will not be executed at that point in time, it will only be <strong>set up</strong> to execute when a mouseleave event occurs.</p> <p>To explain further:</p> <pre><code>&lt;a id="my_link" href="#"&gt; click me! &lt;/a&gt; </code></pre> <p>When you click this, not much happens. Suppose you want it to say <code>You clicked me!</code> when you click on it. You'll need to set it up using the <code>on</code> function.</p> <pre><code>$("#my_link").on('click', function { alert("You clicked me!"); }); </code></pre> <p>Note that you still haven't seen an alert box with the message. You have only <strong>set up</strong> the alert box to be shown on a click. If you click the link, <em>only then</em> will you see the alert box.</p> <p>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 <strong>will be directly executed</strong>. That explains why your code is working when run in the console.</p> <p>I assume the <code>focusLeaving</code> is an event that fires when a mouse leaves the item? In that case, the easiest way to fix this is by removing the <code>on</code> 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.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload