JQuery - Use hover() and on()

Question

i try to use jquery's on()-Method in combination with hover(). I want that the user hovers over a div, gets a value displayed and when moving his mouse away from that div see the old value again, but this is not working... Does anybody have a clue?

$('#content').on('hover', '.player_marktwert_box',
    function() {
    var playerValue = $(this).html();
        $(this).html("test");
    },
    function () {
        $(this).html(playerValue);
    }
);

Thanks!

Looks like it's deprecated: http://api.jquery.com/on/ – Mike Robinson Jul 25 '12 at 20:15 — Mike Robinson, Jul 25 '12 at 20:15

score 5 · Answer 1 · answered Jul 25 '12 at 20:13

5

.hover is actually just a shortcut and not a true event name. It simply expands to mouseenter for the first function and mouseleave for the second.

So, you could use .on("mouseenter", "...", and .on("mouseleave", "...",, respectively.

answered Jul 25 '12 at 20:13

pimvdb

151,816
78
307
352

Thanks, but how can i then use the "old" value of the div in "mouseleave"? – Torben Jul 25 '12 at 20:15
@Torben: You could store and retrieve it using `.data` on the element. (Your current code wouldn't share the variable `playerValue` by the way.) – pimvdb Jul 25 '12 at 20:16

score 2 · Answer 2 · answered Jul 25 '12 at 20:16

2

$('#content').on({
    mouseenter: function() { ... },
    mouseleave: function() { ... }
},'.player_marktwert_box');

This is the proper way to delegate hover events without using the $.hover() shortcut

answered Jul 25 '12 at 20:16

jackwanders

15,612
3
40
40

score 1 · Answer 3 · answered Jul 25 '12 at 20:21

Try this (Just according to pimvdb's idea)

$('#content').on('mouseenter', '.player_marktwert_box', function() {
    var playerValue = $(this).html();
    $(this).html("test").data('playerValue',playerValue);
}).on('mouseleave', '.player_marktwert_box', function() {
    $(this).html($(this).data('playerValue'));
});

DEMO.

score 1 · Answer 4 · answered Jul 25 '12 at 20:22

HERE IS THE FIDDLE: http://jsfiddle.net/collabcoders/ses7G/

var originalValue;
$('#content').on('mouseenter', '.player_marktwert_box', function(){
    originalValue = $(this).html();
    $(this).html("test");
}).on('mouseleave', '.player_marktwert_box', function() {
    $(this).html(originalValue);
});

score 1 · Answer 5 · answered Jul 25 '12 at 20:25

1

A simple example:

var val=$('#foo').html();
$(document).on('mouseenter mouseleave', '#foo', function(ev) {
    $(this).html((ev.type == 'mouseenter') ? 'test' : val);
});

jsFiddle example

answered Jul 25 '12 at 20:25

j08691

204,283
31
260
272

score 0 · Accepted Answer · edited May 23 '17 at 12:29

var playerValue;

$(".selector").on({
    mouseenter: function () {
        playerValue = $(this).html();
        $(this).html("test");
    }, 
    mouseleave: function () {
        $(this).html(playerValue);
    }
});

Please check out this question for more details. Since playerValue is outside of the scope of the event it will have a value that persists. Depending on your scripting this could work, depending on whether it is possible to mouse over multiple .selector elements at once.

score 0 · Answer 7 · answered Jul 25 '12 at 20:22

0

Is there a reason to not just use .hover?

var playerValue = $('.player_marktwert_box').html();
$('.player_marktwert_box').hover(
   function() {
      $(this).html("TEST :)");
   },
   function () {
      $(this).html(playerValue);
   }
);

DEMO - http://jsfiddle.net/M93mM/1/

answered Jul 25 '12 at 20:22

ckaufman

1,487
9
15

The only reason I could see if Torben plans of having multiple instances of the .player_marktwert_box div. – Johnny Jul 25 '12 at 20:26
having a wrapper with .on is the best practice for that because you will not initialize every instance of the .player_martwer_box – Johnny Jul 25 '12 at 20:27
Yes, i have multiple instances of that div. – Torben Jul 25 '12 at 20:49

JQuery - Use hover() and on()

7 Answers7