How to unbind a previous jQuery hover / click event?

Question

I want to unbind the mouseover event when the element is clicked.

HTML markup:

<div id="foto"></div>
<div id="flotante"></div>
<div id="flotante2"></div>

jQuery code:

$('#foto').on({
    mouseover: function(){
        $('#flotante').delay(2000).show('slow');
    },
    mouseleave: function(){
        $('#flotante').hide('slow');
    },
    click: function(){
        // I want the mouseover event to stop executing.        
         $('#flotante2').show();
    }
});

You can see an example here: http://jsfiddle.net/K85DN/

Thanks a lot for your help

I tried it and it didn't work. The mouseover event still fires. — Raul Escarcega
– Raul Escarcega, Commented Nov 6, 2013 at 3:52

Arun P Johny · Accepted Answer · 2013-11-06 03:54:36Z

1

Some changes

Use namespaced event handlers since we need to remove them.
Use setTimeout() to delay the display since we will have to cancel it if the mouse leaves the element before 2 seconds
Use .stop() to handle the animation queue

Try

var $flotante = $('#flotante');
$('#foto').on({
    'mouseover.display': function () {
        var timer = setTimeout(function () {
            $flotante.stop(true, true).show('slow');
        }, 2000)
        $flotante.data('timer', timer);
    },
    'mouseleave.display': function () {
        clearTimeout($flotante.data('timer'))
        $flotante.stop(true, true).hide('slow');
    },
    click: function () {
        $(this).off('mouseover.display mouseleave.display');
        clearTimeout($flotante.data('timer'));
        $flotante.stop(true, true).hide('slow');
        $('#flotante2').show();
    }
});

Demo: Fiddle

edited Nov 6, 2013 at 3:54

answered Nov 6, 2013 at 3:49

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arun P Johny Over a year ago

@RaulEscarcega it is fixed now... try the demo again

Collectives™ on Stack Overflow

How to unbind a previous jQuery hover / click event?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related