Question

I experimenting with jQuery. As I was trying I found out that I can’t use hover event with .bind. And I don’t know what is wrong.

$(document).ready(function(){
 $('.some-class').bind({
  hover: function(e) {
  // Hover event handler
   alert("hover");
  },
  click: function(e) {
  // Click event handler
   alert("click");
  },
  blur: function(e) {
  // Blur event handler
  }
 });
});

What is surprising (at least to me) is that hover is not working. The others “click” and “blur” are working fine.

Also the following works without any problems.

$(".some-class").hover(function(){
     // stuff
})

Maybe I can use the above code. But not knowing why is a big nuisance. So any ideas?

Thanks!

Answer 1

You need to use the mouseenter and mouseleave events (which .hover() uses) directly when binding with an object like this:

$(document).ready(function(){
 $('.some-class').bind({
  mouseenter: function(e) {
  // Hover event handler
   alert("hover");
  },
  mouseleave: function(e) {
  // Hover event handler
   alert("hover");
  },
  click: function(e) {
  // Click event handler
   alert("click");
  },
  blur: function(e) {
  // Blur event handler
  }
 });
});

.hover() is defined specially here in the jQuery event code…it simply isn’t supported like other events in places like .bind(), since it’s not an event, it’s just a function to help you bind the mouseenter and mouseleave events.