CODEWITHSUNDEEP
javascriptjquery
Shonna
Shonna

Reputation: 1133

I can't get hover or mouseenter to unbind and rebind again

I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.

Basically, I can get things to unbind, but I can't get them to bind again afterwards.

I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.

http://jsfiddle.net/770b5p8q/3/

Here is "hover" functionality:

$('.square').each(function(){
    $(this).bind("mouseenter", function(){
        $(this).addClass('active');
    });
    $(this).bind("mouseleave", function(){
        $(this).removeClass('active');
    });
});

Here is what should enable/disable it:

$('.hover_enabled').click(function(){
    $('.square').each(function(){
        $(this).bind("mouseenter");
        $(this).bind("mouseleave");
    });
});

$('.hover_disabled').click(function(){
    $('.square').each(function(){
        $(this).unbind("mouseenter");
        $(this).unbind("mouseleave");
    });
});

Upvotes: 0

Views: 297

Answers (2)

Ram
Ram

Reputation: 144689

You should pass the function for binding and unbinding the handlers, something like:

var mouseEnterHandler = function () {
    $(this).addClass('active');
}
var mouseLeaveHandler = function () {
    $(this).removeClass('active');
};

$('.square').bind("mouseenter", mouseEnterHandler)
            .bind("mouseleave", mouseLeaveHandler);

$('.hover_enabled').click(function () {
    $(this).addClass('active');
    $('.hover_disabled').removeClass('active');

    // I need to bind hover here
    $('.square').bind("mouseenter", mouseEnterHandler)
                .bind("mouseleave", mouseLeaveHandler);
});

But the code becomes ugly and unmaintainable. You can use event delegation instead:

$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
    // toggle the class by checking the type of the event
    $(this).toggleClass('active', event.type === 'mouseenter');
});

// caching the state changers 
var $e = $('.hover_enabled, .hover_disabled').click(function () {
    var $this = $(this).addClass('active'),
        isHoverable = $this.hasClass('hover_enabled');

    // exclude the clicked element from the set and remove the class
    $e.not($this).removeClass('active');
    $('.square').toggleClass('hoverable', isHoverable);
});

The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.

.square.hoverable:hover {

}

http://jsfiddle.net/bztec1f4/

Upvotes: 2

Waqar Alamgir
Waqar Alamgir

Reputation: 9968

Once you rebind it back you need to pass function as well.

$('.hover_enabled').click(function(){
    $('.square').each(function(){
        $(this).bind("mouseenter", function(){
            $(this).addClass('active');
        });
        $(this).bind("mouseleave", function(){
            $(this).removeClass('active');
        });
    });
});

Upvotes: 1

Related Questions