Unbind all mouseover events on window scroll

Question

I have tried this code:

$(function(){
    $('.media-in').bind('mouseover',function(){
        $(this).children('.media-options').show();
    });
    $('.media-in').bind('mouseout',function(){
        $(this).children('.media-options').hide();
    });
    $(window).on('scroll',function(){
        $('.media-in').unbind('mouseover');
    });
});

It doesn't works as expected. I would like to unbind the event happening on mouseover when I scroll the page, how can I do that?

Also, is there any way to unbind events on the page scrolling by array? Something like:

$(window).scroll(function(){ 
    $(this).unbind(['mouseover','click','mouseout']);
});

Answer 1

As of jQuery 1.7, off() and on() are the preferred methods to bind and unbind event handlers.

So to remove all handlers from an element, use this:

$('.media-in').off();

or for specific handlers:

$('.media-in').off('mouseover mouseout click');

Answer 2

You can use on() and off(), but once the event handler is removed, it won't magically return once you've stopped scrolling, you would have to rebind it again with on().

$(function(){
    var timer;
    media_bind();

    $(window).on('scroll', function(){
         clearTimeout(timer);
         $('.media-in').off('mouseover mouseout');
         timer = setTimeout(media_bind, 500);
    });

    function media_bind() {
         $('.media-in').on(
             mouseover: function() {
                 $(this).children('.media-options').show();
             },
             mouseout: function() {
                 $(this).children('.media-options').hide();
             }
         });
    }  
});