2

I'm trying to prevent my buttons from losing the active class on mouseleave, but I can't get it working.

So, my buttons are initialized with jQuery's buttonset(). They are buttons, not checkboxes. Checkboxes are out of the question because they require IDs to work.

This is my code:

$('.jquery_ui_buttonset', this.scope).buttonset();

$('.jquery_ui_buttonset > button', this.scope).each(function() {
    $(this).bind('mouseleave keyup mouseup blur', function(e) {
        if ($(this).hasClass('ui-state-persist')) {
            e.stopImmediatePropagation();
            if (e.type == 'blur') {
                $(this).removeClass('ui-state-focus');
            }
            $(this).removeClass('ui-state-hover');
        }
    });
});

The idea is that if the button has the ui-state-persist class, it should not lose the ui-state-active class until both are explicitly removed. Switching of active buttons is done on click by this handler:

CMSPage.prototype.switchEditTab = function(e) {
    if (e.data.params.id == null) {
        return;
    }

    $('.editor .body', this.scope).hide();
    $('.editor .header button', this.scope).removeClass('ui-state-active').removeClass('ui-state-persist');
    $('.editor .body[data-tab-id=' + e.data.params.id + ']', this.scope).show();
    $('.editor .header button[data-id=' + e.data.params.id + ']', this.scope)
        .addClass('ui-state-active').addClass('ui-state-persist');
}

I've also tried adding e.stopPropagation() and e.preventDefault() and all their combinations, but it doesn't work. And this exact same code works for regular UI buttons (ones not in buttonset).

Any help would be appreciated.

EDIT

I still haven't resolved this problem. I would love to give you guys bounty for helping me out, but I can't since I'm a new member. Has noone ever encountered this problem in which he wanted to use buttonset() with persistently active buttons, and not checkboxes?

Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
morgoth84
  • 1,070
  • 2
  • 11
  • 25

0 Answers0