0

I am a bit confused with this:

I have a page with a set of buttons (i.e. elements with class attribute 'button'. The buttons belong to one of two classes (grp1 and grp2).

These are my requirements

  • For buttons with class attribute 'enabled', when the mouse hovers over them, a 'button-hover' class is added to them (i.e. the element the mouse is hovering over). Otherwise, the hover event is ignored

  • When one of the buttons with class attribute 'grp2' is clicked on (note: it has to be 'enabled' first), I disable all 'buttons' in that group (i.e. remove the 'enabled' class for all elements with class 'grp2' (should probably selecting for elements with class 'button grp2' AND 'enabled' - but I am having enough problems as it is, so I need to keep things simple for now).

This is what my page looks like:

<html>
<head>
   <title>Demo</title>
   <style type="text/css">
     .button {border: 1px solid gray; color: gray}
     .enabled {border: 1px solid red; color: red}
     .button-hover {background-color: blue; }
   </style>
   <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
   <div class="btn-cntnr">
      <span class="grp1 button enabled">button 1</span>
      <span class="grp2 button enabled">button 2</span>
      <span class="grp2 button enabled">button 3</span>
      <span class="grp2 button enabled">button 4</span>
   </div>
   <script type="text/javascript">
      /* <![CDATA[ */
      $(document).ready(function(){

        $(".button.enabled").hover(function(){
            $(this).toggleClass('button-hover');
          }, function() {
            $(this).toggleClass('button-hover');
        });

        $('.grp2.enabled').click(function(){ $(".grp2").removeClass('enabled');});
       });      
      /* ]]> */
   </script>
</body>
</html>

Currently, when a button with class 'grp2' is clicked on, the other elements with class 'grp2' have the 'enabled' class removed (works correctly).

HOWEVER, I notice that even though the class no longer have a 'enabled' class, SOMEHOW, the hover behavior is still applied to these elements (WRONG). Once an element has been 'disabled', I no longer want it to respond to the hover() event.

How may I implement this behavior, and what is wrong with the code above (i.e. why is it not working? (I am still learning jQuery)

Improve this question
1
  • you can use $(function(){ your stuff }) instead of $(document).ready(function(){ your stuff }). It does the same, its just a shortcut.
    – meo
    Commented Apr 26, 2010 at 8:30

3 Answers 3

Reset to default
1

You could attach hover listener to all buttons, and then check at runtime, whether the particular button has class enabled.

$(".button").hover(function(){
    if ($(this).hasClass('enabled')) {
      $(this).addClass('button-hover');
    }
  }, function() {
    $(this).removeClass('button-hover');
});
Improve this answer
1
  • Cool. Now why didn't I think of that?. Its simple and elegant. Makes me want to hang my head in shame ;)
    – morpheous
    Commented Apr 26, 2010 at 8:42
1

All your initialization code (i.e. setting the functions) is done in $(document).ready() function. The hover and click functions get set based on the classes on the elements at that time.

As hover isn't actually an event - it is a helper handling the onmouseover and onmouseout events - to remove the hover behaviour you need to unbind those function, like so

$('.grp2.enabled').click(function() {
  $(".grp2").removeClass('enabled');
  $(".grp2").unbind('onmouseover').unbind('onmouseout');
}

If you want to re-enable (some of) the buttons, you should use the .hover() helper with those elements also when enabling the buttons.

$.each(<collection_of_enabled_elements>, function() {
  this.hover(
    function() {
      $(this).toggleClass('button-hover');
    },
    function() {
      $(this).toggleClass('button-hover');
    }
  )
});
Improve this answer
2
  • +1 Ah, yes, now were on the right track.. I'll investigate some more, and if I am able to solve it, I will accept your answer
    – morpheous
    Commented Apr 26, 2010 at 8:25
  • Personally, I'd probably do this like Voyta suggested. My answer was basicly to point out why the original implementation didn't work and how to possibly correct it.
    – Jawa
    Commented Apr 26, 2010 at 8:36
0

When applying a event handler to an element, then the handler is applied to the element independent on what conditions you use to find/select this element. Its not a "rule" saying: when ever a button is enabled then apply the hover handler, but a "command" saying all buttons which are now "enabled" will get this hover handler now (and keep it unless you remove it).

Unless you need something else to happen other than applying different style while hovering, I'd suggest you use CSS for the hovering:

<style type="text/css">
  .button.enabled:hover {
    background-color: blue; 
  }
</style>

Also, is there any special reason you are using spans instead of "real" buttons? You could use their "built in" ability to disable.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.