Solved

jQuery hover event disabling by itself, it would seem

Posted on 2015-01-15
8
172 Views
Last Modified: 2015-01-16
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

0
Comment
Question by:elepil
  • 4
  • 4
8 Comments
 
LVL 2

Expert Comment

by:Elxn
Comment Utility
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/
0
 

Author Comment

by:elepil
Comment Utility
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?
0
 
LVL 2

Expert Comment

by:Elxn
Comment Utility
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.

:)
0
 

Author Comment

by:elepil
Comment Utility
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

0
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 2

Accepted Solution

by:
Elxn earned 500 total points
Comment Utility
Hmmm..  You know i took out the fix() function and it didn't work, but when i put the fix function back in it worked.  I don't understand why that is.

Seems like the fix function is what makes it work...  This is a bit over my head as to why that is.

Here it works with an older version of jquery:  http://jsfiddle.net/t6q9reds/1/

Try taking the fix() function out and you'll see it stops working.  I'm using Chrome to check this.
0
 

Author Comment

by:elepil
Comment Utility
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???
0
 

Author Comment

by:elepil
Comment Utility
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.
0
 
LVL 2

Expert Comment

by:Elxn
Comment Utility
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.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now