StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POStop button from losing active state in jQuery UI buttonset
text
Body
copied!<p>I'm trying to prevent my buttons from losing the active class on mouseleave, but I can't get it working.</p> <p>So, my buttons are initialized with jQuery's <code>buttonset()</code>. They are <strong>buttons</strong>, not checkboxes. Checkboxes are out of the question because they require IDs to work.</p> <p>This is my code:</p> <pre><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'); } }); }); </code></pre> <p>The idea is that if the button has the <code>ui-state-persist</code> class, it should not lose the <code>ui-state-active</code> class until both are explicitly removed. Switching of active buttons is done on click by this handler:</p> <pre><code>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'); } </code></pre> <p>I've also tried adding <code>e.stopPropagation()</code> and <code>e.preventDefault()</code> and all their combinations, but it doesn't work. And this exact same code works for regular UI buttons (ones not in buttonset).</p> <p>Any help would be appreciated.</p> <p><strong>EDIT</strong></p> <p>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 <code>buttonset()</code> with persistently active buttons, and not checkboxes?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload