asked on

jQuery hover event disabling by itself, it would seem

I have this sample code I got somewhere and was playing around with it. It attempts to demonstrate certain simple jQuery events like hover, click, dblclick, etc.

I noticed that once I click/dblclick my mouse on the <div> area, the hover event stops working. Yet, I see no code that unbinds or removes the event. Can someone please explain to me why the hover event would cease functioning after the div area is clicked/dbl-clicked?

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Event Helper Functions</title>
    <link rel="stylesheet" href="../style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#evtTarget").hover(highlight, highlight);

            $("#evtTarget").click(fnClick1);
            
            $("#evtTarget").dblclick(fnClick2);
            
            $(window).resize(fnResize);

            $("#evtTarget").one("click", function() {
                $(this).css({ background: "red",
                    cursor: "auto"
                });
            });
        });
        
        function highlight(evt) {
            $("#evtTarget").toggleClass("highlighted");
        }
        function fnClick1() {
            $("#evtTarget").html("Click");
        }
        function fnClick2() {
            $("#evtTarget").html("Double Click");
        }
        function fnResize() {
            $("#evtTarget").html("Browser window resized");
        }
    </script>
    <style type='text/css'>
    .highlighted {
        background-color:Red;
    }
    </style>
</head>
<body>
    <h1>Using Event Helpers</h1>
    <p>Some types of events are fairly common, and jQuery provides shorthand helper functions to make your code a little easier to write and read. Some examples:</p>
    <ul>
        <li><code>hover()</code>: use this instead of mouseover and mouseleave events</li>
        <li><code>click()</code>: listens for click events</li>
        <li><code>dblclick()</code>: listens for double-click events</li>
        <li><code>resize()</code>: fired on the window object when the browser window resizes</li>
    </ul>
    <div id="evtTarget" class="box">Mouse over this div to see the hover effect. Try clicking and double-clicking.</div>
</body>
</html>

Open in new window

Elxn

Seems like you need to take out the evt var from the function.

function highlight() {
$("#evtTarget").toggleClass("highlighted");
}

Check it out here: http://jsfiddle.net/t6q9reds/

elepil

ASKER

Elxn, thanks for responding.

The only place this works is in jsfiddle, but it won't work with all the browsers I've tried in (i.e., IE, FireFox, Opera, Safari, and Chrome).

I also noticed you had a fix() function inside the fnClick1 event handler which is an undefined function. Can you please explain to me what that is?

Elxn

Oh that fix function was just some junk i was doing and later discarded. Forgot to take it out!

Just found your problem. When i use an older version of jquery (like the one your using in your code) it doesn't work. Try changing the jsfiddle to that old version and it won't work there either.

Update your jquery if you can and it should work. As you can see i'm using like 2.1.0 in the fiddle.

:)

elepil

ASKER

I noticed you were using jQuery 2.0.1. I used jQuery 2.1.1 and it still wouldn't work! Is jQuery normally this buggy??

Here's the code again, only difference is I'm using jQuery 2.1.1, and it still won't work!

<!DOCTYPE html>
<html>
<head>
    <title>Using jQuery Event Helper Functions</title>
    <link rel="stylesheet" href="../style.css"/>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("#evtTarget").hover(highlight, highlight);

            $("#evtTarget").click(fnClick1);
            
            $("#evtTarget").dblclick(fnClick2);
            
            $(window).resize(fnResize);

            $("#evtTarget").one("click", function() {
                $(this).css({ background: "red",
                    cursor: "auto"
                });
            });
        });
        
        function highlight(evt) {
            $("#evtTarget").toggleClass("highlighted");
        }
        function fnClick1() {
            $("#evtTarget").html("Click");
        }
        function fnClick2() {
            $("#evtTarget").html("Double Click");
        }
        function fnResize() {
            $("#evtTarget").html("Browser window resized");
        }
    </script>
    <style type='text/css'>
    .highlighted {
        background-color:Red;
    }
    </style>
</head>
<body>
    <h1>Using Event Helpers</h1>
    <p>Some types of events are fairly common, and jQuery provides shorthand helper functions to make your code a little easier to write and read. Some examples:</p>
    <ul>
        <li><code>hover()</code>: use this instead of mouseover and mouseleave events</li>
        <li><code>click()</code>: listens for click events</li>
        <li><code>dblclick()</code>: listens for double-click events</li>
        <li><code>resize()</code>: fired on the window object when the browser window resizes</li>
    </ul>
    <div id="evtTarget" class="box">Mouse over this div to see the hover effect. Try clicking and double-clicking.</div>
</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Elxn

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

elepil

ASKER

Hahahaha! I put in the fix() undefined function and it works now with all the browsers. Talk about SCREWED UP! I don't know what to lose faith in, jQuery or JavaScript. I have another open question where the Event.metakey isn't working either.

From your experience with jQuery, have you seen a lot of crazy bugs like this???

elepil

ASKER

Elxn, I figured out the problem!

The problem was that the code:

$("#evtTarget").one("click", function() {
                $(this).css({ background: "red",
                    cursor: "auto"
                });
            });

Open in new window

The hover event was still working as normal, and you can see evidence of this if you view the code from the browser's developer toolkit (webkit or otherwise) where you'd see the 'highlight' class being toggled. But the above code sets the background color permanently to red after a mouse click; as a result, the hover effect was trying to change an already red background to red. So the end result is that the hover effect became imperceptible.

That code came from a short jQuery course I was taking, and I'm pissed at the author right now for being so careless.

But I thank you for responding, and you get the points anyway.

Elxn

Yeah i guess that was the best solution. But it is crazy how the undefined function seemed to fix it. It would be fun to get someone who knows the internal workings of jquery to explain why this is. Maybe you could post a question on EE asking just that?

Thanks man.