Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: remove hover event after the click

    Hi,
    How can I remove the hover event in jquery after the click event is triggered...?

    jquery:
    Code:
    $('li').hover(function(e){	
    	...	
    
    	},function(){		
    		...
        });
    	
    	
    $('li').click(function(){	
    	$('li').unbind("hover");
    	});
    html code:

    <li>1</li>
    <li>2</li>
    <li>3</li>

    Many thanks,
    Lau

  • #2
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Why not just reset the .hover function to null, or even an empty function?

  • #3
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    There is no "resetting the hover function to an empty function"; all that will do is add an empty function to the event handler.

    You have to understand that while $('li').hover looks very similar to, say, $('li').click, hover isn't actually an event -- it is a helper handling the onmouseover and onmouseout events.

    Thus, if you want to unbind that hover, you have to do it like this:

    Code:
    $('li').unbind('onmouseover').unbind('onmouseout');

  • #4
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by venegal View Post
    There is no "resetting the hover function to an empty function"; all that will do is add an empty function to the event handler.
    Thanks for mentioning unbind. But additionally, if you had an empty function, it would be called, nothing would happen, and it would return. And in jQuery, hover is treated as a method, however implemented in css. The jQuery and the css are two different things, in other words.

  • #5
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    I don't know what you're getting at there. Sure, if you call an empty function, nothing happens, but that doesn't mean other non empty functions won't also be called:

    Code:
    $('li').hover(foo);
    $('li').hover(function(){});
    won't prevent foo from being called when a <li> is hovered. On a hover, it will call foo, and then it will call the empty function, which doesn't make much sense.

    And how does the fact that jQuery and CSS are different things have anything to do with anything?

  • #6
    Regular Coder
    Join Date
    Mar 2008
    Posts
    301
    Thanks
    2
    Thanked 30 Times in 30 Posts
    Quote Originally Posted by venegal View Post
    but that doesn't mean other functions won't also be called
    Yes you're right. I stand corrected.

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lauthiamkok View Post
    Hi,
    How can I remove the hover event in jquery after the click event is triggered...?

    jquery:
    Code:
    $('li').hover(function(e){	
    	...	
    
    	},function(){		
    		...
        });
    	
    	
    $('li').click(function(){	
    	$('li').unbind("hover");
    	});
    html code:

    <li>1</li>
    <li>2</li>
    <li>3</li>

    Many thanks,
    Lau
    this is my result...

    http://lauthiamkok.net/tmp/gtclients/1/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •