Question

I bound a mouseenter/mouseleave event to an element (just an image), which in turn executes two functions. My issue is that I want one of the two functions to ONLY fire once on the first mouseenter.

aka on the first mouseenter two things happen, on the second mouseneter only one thing happens.

$(.bubbles).mouseenter(function(){
    functionSwapImage();                         //this should happen everytime
}).mouseleave(function(){
    functionSwapImageBack();                     //this should happen everytime
    $(".bubbles").one("mouseleave", function(){
        myFunction();                            //this should happen once!
    });
});

EDIT: http://jsfiddle.net/Am5ZC/

If I move the .one function outside of that block and into its own separate mouse enter/leave block, then the functionSwapImageBack() only fires once (ie, .one is removing the event for both blocks of code).

Not really sure how to go about this but thanks for the help!

Answer 1

Try this using namespaced events which remove only that specific event handler with namespace.

$(".bubbles").mouseenter(function(){
    functionSwapImage();                         //this should happen everytime
}).mouseleave(function(){
    functionSwapImageBack();                     //this should happen everytime
}).one("mouseleave.onlyonce", function(){
    myFunction();                            //this should happen once!
});