?
Solved

jQuery hover event disabling by itself, it would seem

Posted on 2015-01-15
8
Medium Priority
?
210 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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
 
LVL 2

Accepted Solution

by:
Elxn earned 2000 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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses
Course of the Month17 days, 10 hours left to enroll

830 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