jQuery .click doesn't work when also using .hover , how can I fix this?

Question

I'm using the code below, the .click action works fine on its own, as soon as I add .hover, then .hover works and .click stops working. Any idea why this happens and how to fix it?

$('#11').click(function(){
    $('#widget').load('../212/?id=11');
    $(this).attr("src", "<?php bloginfo('stylesheet_directory'); ?>/images/category-fantasy-32-disable.png");
});
$('#11').hover(
function () {
    //hover event
    $(this).attr("src", "<?php bloginfo('stylesheet_directory'); ?>/images/category-fantasy-32-disable.png");
},
function () {
   //hover out event 
   $(this).attr("src", "<?php bloginfo('stylesheet_directory'); ?>/images/category-fantasy-32.png");
});

it could be because when you click and move the mouse out the mouseout event will get triggered resulting in the src being changed — Arun P Johny
– Arun P Johny, Commented Oct 19, 2013 at 5:10

Devesh Kumar · Accepted Answer · 2013-10-19 05:18:20Z

1

The solution is to bind to click and hover both. Here is a sample code

$('p').on('click hover', function () {
    alert("Clicked");
});

$('p').hover(
    function(){
      console.log("X");
    },
    function(){
        console.log("Y");
    }
);

This will trigger both hover in and hover out method. and if you click it works as well. Working link: http://jsfiddle.net/43BW4/

answered Oct 19, 2013 at 5:18

Devesh Kumar

1,0191 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

wetjosh Over a year ago

Funny, I don't want to hijack this post, but I was just about to post almost the exact same question. You fiddle works just as you say, but when applying it with addClass instead of just logging to the console, I still can't get it to work. I've forked your fiddle and modified it. What I'm trying to do is make the paragraph turn green when hovered, return to black when hovered off, but stay green if clicked. What am I doing wrong? jsfiddle.net/dfjosh/LxwHz

Devesh Kumar Over a year ago

This is because as soon as you hover out which is basically mouseleave event the class is removed irrespective you clicked or not. Try adding a flag when element is clicked.

Shaba7elail Over a year ago

@wetjosh This answer worked for me

Devesh Kumar Over a year ago

Great! That is what I was saying. Add a flag once you have clicked the element.

Collectives™ on Stack Overflow

jQuery .click doesn't work when also using .hover , how can I fix this?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related