• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Ron McLeod
  • Paul Clapham
  • Devaka Cooray
  • Tim Cooke
Sheriffs:
  • Rob Spoor
  • Liutauras Vilda
  • paul wheaton
Saloon Keepers:
  • Tim Holloway
  • Tim Moores
  • Mikalai Zaikin
  • Carey Brown
  • Piet Souris
Bartenders:
  • Stephan van Hulst

jquery, hover and unbind

 
Ranch Hand
Posts: 132
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi,

I'm facing a real problem, it's about the hover function in jquery. Whenever I call .hover(f(e), g(e)) the functions f(e) and g(e) somehow pileup. I guess this is normal behaviour and can be undone with
$(this).unbind('mouseover').unbind('mouseout');
However when i immediately do after the unbind:
$(this).hover(function(e){..}, function(){}) ;
The functions f(e), and (probably) g() simply dont get evoked after the hover event. Is there something I'm missing? I'm a bit lost. Any help is greatly appreciated.

kind regards,
Jeroen dijkmeijer.
 
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Are you calling hover() more than once? I'm not sure what you mean by "piling up".
 
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
onmouseover and onmouseout get called if there are children elements and the mouse enters and leaves them.

Eric

 
Bear Bibeault
Sheriff
Posts: 67750
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
But not with hover(). That's the whole point of the method.
 
jeroen dijkmeijer
Ranch Hand
Posts: 132
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Thanks for the answers so far and my apologies for the unthoughtful asked question. Below a code snippet which should clarify a bit.


with line 13 commented, out clicking the "click me" (why cant this be an <a href=.. btw?) will add functions to the mouseover and mouseout event of the red box. So without a click nothing happens, first click will nicely alert the count on the mouseout. The count is increased by one with every move into the red box. Second click will show alert 2 times and the count will be increased by 2, a third click will alert 3 times and delta will be three. This behavior is undesired, I only want two functions on the hover which will be replaced every time I hit "click me"
So I thought to be clever and I uncommented line 13, which I hoped, would remove the existing function from the mouseover and mouseout events and attach new functions to it. But that only works first time, second time I hit "click me" entering and leaving the red box doesn't do a thing.
Where did I go wrong? And what can I do to replace the functions on the "hover" instead of "piling them up"?

regards,
Jeroen Dijkmeijer.

PS This example does not show the need for the replacement of functions in the hover element, but in my real project, that need certainly exists!
PPS safari and firefox give same results.
 
Eric Pascarello
author
Posts: 15385
6
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Bear said what the problem was, guess his magic ball was working. If you click click me a 2nd time you are adding the hover event for the second time.

You either need to check that it is attached or you need to unbind hover before applying it once again.

Eric

 
jeroen dijkmeijer
Ranch Hand
Posts: 132
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Haa!

Found it! Explaining the question is already 80% of the answer and using the development version of jquery made it completely clear:
instead of the googled mouseover and mouseout I should use: "mouseenter" and "mouseleave". Now only convince Google that this is the solution, so others don't run into the same problem.

remains the question why binding a function to the click event does not work for the <a href=...

regards,
Jeroen.

 
jeroen dijkmeijer
Ranch Hand
Posts: 132
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

You either need to check that it is attached or you need to unbind hover before applying it once again.


For the record unbind('hover') does not work, and for the example I worked with there is no need to check whether hover was attached.
 
expectation is the root of all heartache - shakespeare. tiny ad:
Gift giving made easy with the permaculture playing cards
https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing
reply
    Bookmark Topic Watch Topic
  • New Topic