Solved

jQuery hover event disabling by itself, it would seem

Posted on 2015-01-15
8
173 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
ID: 40552572
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
ID: 40552700
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
ID: 40552703
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
ID: 40552709
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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 2

Accepted Solution

by:
Elxn earned 500 total points
ID: 40552717
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
ID: 40552719
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
ID: 40552776
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
ID: 40553484
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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…

911 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

20 Experts available now in Live!

Get 1:1 Help Now