.hover(...) and on.("hover"...) behaving differently

hover, jquery

Solution

`.on()` can only take 1 function, so you have to interrogate the passed `event` to check what the event was. Try this:

$("element").on("hover", function(e) {
    if (e.type == "mouseenter") {
        console.log("one");   
    }
    else { // mouseleave
        console.log("two");   
    }
});

Example fiddle

Alternatively you can split the two events which constitute the `hover()` method - `mouseenter` and `mouseleave`:

$("#element").on("mouseenter", function() {
  console.log("one");   
}).on('mouseleave', function() {
  console.log("two");   
});

#element {
  background-color: black;
  height: 100px;
  margin: 100px;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

Problem

Using JQuery I am trying to chain a couple of functions when an element has a hover state. I would normally use the `.hover` event function, but after reading some tutorials I read that using `.on` is better as you can use one event handler to monitor all bubbling events within a document. However, I am having problems when I chain two functions together like so: ``` $("element").on( "hover", function() { console.log("one"); }, function() { console.log("two"); }); ``` I expected the result to be one two (which was the case when using `.hover`) but instead I get two two. Can anyone explain what I am doing wrong or whether this is expected behaviour and why? Reproduced using `.hover(...)`: http://jsfiddle.net/gXSdG/ Reproduced using `.on(hover...)`: http://jsfiddle.net/gXSdG/1/

Original source