CODEWITHSUNDEEP
jquery
jarrodwhitley
jarrodwhitley

Reputation: 828

How do I make a .mouseleave() function trigger one time

I'm creating an exit pop-up that should trigger once. After the user closes the pop-up it reappears when they .mouseleave() again. This is my function:

    $('body').mouseleave(function () {
        $('#popup-container').css('display', 'grid');
        $('#popup-bg').fadeIn();
        Cookies.set('~plan-popup', true, {expires: 7, path: ''});
    });

Every post I've found explains how to use .one() with .one("click", function(). I want to use .one() with .mouseleave() so those posts do not help. (I realize the titles look similar, but before you mark as a duplicate please go read those other posts, they do not answer my question.)

Even the jQuery documentation for .one() doesn't help much with this.

How can I make this .mouseleave() function trigger only once?

Correction: I need to familiarize myself with jQuery terminology. I didn't realize that .mouseleave() is an "event". The documentation does actually go over this here:

.one( events [, data ], handler )
Events
Type: String A string containing one or more JavaScript event types, such as "click" or "submit," or custom event names.

Upvotes: 0

Views: 566

Answers (1)

Taplar
Taplar

Reputation: 24965

mouseleave() in jQuery is simply a wrapper around on('mouseleave', ...). So to use the one() version which will automatically remove it after the first execution, you just need to use the non-wrapper binding with one.

$(selector).one('mouseleave', ...)

Upvotes: 1

Related Questions