Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

jQuery hover event disabling by itself, it would seem

Posted on 2015-01-15
8
Medium Priority
?
205 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

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

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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)
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…
Suggested Courses

618 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