Solved

jQuery event handling question

Posted on 2015-01-16
2
98 Views
Last Modified: 2015-01-17
Please look at the sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".event").on("mouseenter mouseleave", "div, ul, li", highlight);
                
                function highlight(event) {
console.log($(event.target).prop("tagName"));
                    $(this).toggleClass("highlightEvent");
                }
            });
        </script>
        <style>
            div {
                height: 100px;
            }
            .highlightEvent {
                background-color: cornsilk;
            }
            .highlightEvent .eventDate {
                font-weight: bold;
                text-decoration: underline;
                color: red;
            }
        </style>
    </head>
    <body>
        <div class="event">
            <ul><li class="eventDate">January 1, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 2, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 3, 2015</li></ul>
        </div>
        <div class="event">
            <ul><li class="eventDate">January 4, 2015</li></ul>
        </div>
    </body>
</html>

Open in new window


I am having two problems with this.

1) Can someone tell me why the event is firing twice when I mouse in, and twice more when I mouse out?

2) My object is to make the <div>'s background turn to yellow when I hover over it. But what's happening is I'm getting the <li> instead, and it's changing only the <li>'s background to yellow. How can I set this up so that any mouse movement inside the <div> will return me a reference to the <div> and not any of its children (i.e., without using parent())?
0
Comment
Question by:elepil
2 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
ID: 40554900
Hi,
not exact sure why, but you attached the event to all childs, perhaps that.
I did some rebuild on your script as there are two nice jQuery functions inside, which makes your objective quite nice:
$(function() {
                $("div.event").mouseenter(function() {
                    //alert("Enter");
                    $(this).toggleClass("highlightEvent");
                }).mouseleave(function() {
                    //alert("Left");
                    $(this).toggleClass("highlightEvent");
                });
            });

Open in new window

Sample:
http://jsfiddle.net/EE_RainerJ/60hxq6hq/

HTH
Rainer
0
 

Author Closing Comment

by:elepil
ID: 40555282
Thanks for the help!
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

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 …
In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
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…

808 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