unbind a jquery hover event handler within click

Question

I have rotating jQuery tabs which I want to pause when you hover over them and stop rotating when you click.

However, although the pausing works fine, I cannot unbind the hover event (even unbinding mouseenter and mouseleave separately).

I've created two jsfiddles here with two different approaches, both of which have the same problem.

http://jsfiddle.net/bdrvC/15/

function tab_hover_in() {
        $(this).tabs('rotate', 0, false);
}
function tab_hover_out() {
        $(this).tabs('rotate', 3000, false);
}
function tab_click() {
        $(this).tabs('rotate', 0, false);
        $(this).unbind('mouseenter',tab_hover_in);
        $(this).unbind('mouseleave',tab_hover_out);
        event.preventDefault();  
}

$('.tabs-rotate').tabs({
        selected: 'tabs-1'
}).tabs('rotate', 3000, false);

$('.tabs-rotate').bind({
        'click': tab_click,
        'mouseenter': tab_hover_in,
        'mouseleave': tab_hover_out
});

http://jsfiddle.net/bdrvC/16/

$('.tabs-rotate').tabs({
  selected: 'tabs-1'
}).tabs('rotate', 3000, false);

$('.tabs-rotate').hover(function() {
    $(this).tabs('rotate', 0, false);
  }, function() {
    $(this).tabs('rotate', 3000, false);
});
$('.tabs-rotate').click(function() {

  $(this).tabs('rotate', 0, false);
  $(this).unbind('mouseleave');

});

Could anyone explain why the rotation continues even after the click?

Many thanks!

malificent · Accepted Answer · 2012-11-06 14:38:07Z

1

your click event isn't getting bound to the proper element...you could use

$('.ui-tabs-nav li a').click(function() {...});

instead

answered Nov 6, 2012 at 14:38

malificent

1,43114 silver badges18 bronze badges

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

Collectives™ on Stack Overflow

unbind a jquery hover event handler within click

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related