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');