jquery hover not firing

Question

i'm adding new clients with socket messages AFTER domready. i want to expand them on hover.

read some answers here, but nothing works. i don't know why

i tried

socket.on('newStudentJoined', function studentJoined(msg) {
    console.log(msg.student + ' joined the room');
    $(document.createElement('div'))
        .attr('class', 'studentIcon closed col-md-2 ' + msg.student)
        .text(msg.student + ' 4r3 g345t g354 g54 ght65 g45t 3f4 f4 f4 534 g534')
        .on('hover', function() {
            console.log('hovering');
            $(this).toggleClass('closed').toggleClass('open');
        })
        .appendTo('#joinedClients');
});

and

$('.studentIcon').on('hover', function() {
    console.log('hovering');
    $(this).toggleClass('closed').toggleClass('open');
});

but not even the "hovering" console log comes out. the selector is correct, if i log it, it highlights the exact element. to make sure:

<div id="joinedClients" class="row">
    <div class="studentIcon closed col-md-2 test">test 4r3 g345t g354 g54 ght65 g45t 3f4 f4 f4 534 g534</div>
</div>

what's wrong here?

Amar Singh · Accepted Answer · 2016-02-02T02:39:07.750

5

use mouseover instead

$(document).on('mouseover', '.studentIcon',function() {
    console.log('hovering');
    $(this).toggleClass('closed').toggleClass('open');
});

OR USE

$(document).on("mouseenter mouseleave", ".studentIcon", function (e) {
  if (e.type == "mouseenter") {
    // check if it is mouseenter, do something
  } else {
    // if not, mouseleave, do something
  }
});

The .hover() method binds handlers for both mouseenter and mouseleave events. You can use it to simply apply behavior to an element during the time the mouse is within the element.

edited Feb 02 '16 at 02:39

answered Feb 01 '16 at 19:52

Amar Singh

5,464
2
26
55

mouseover is dangerous -- it can be fired for each child view that you enter as well. – Nick White Feb 01 '16 at 19:56
not even .on('mouseover' works. this is driving me crazy – user3787706 Feb 01 '16 at 20:51
@user3787706 :i have edited the code like this `$(document).on('mouseover', '.studentIcon',function() { console.log('hovering'); $(this).toggleClass('closed').toggleClass('open'); });` this will surely work – Amar Singh Feb 02 '16 at 02:40
now it works. thanks man. is it safe to have the same "toggle-both-classes"-code for both events? or can something go wrong there? – user3787706 Feb 02 '16 at 10:37
can you still give your opinion on the last question please? can something break there? like "the mouseleave was somehow not detected and from now on, every mouseenter will CLOSE the div"? – user3787706 Feb 02 '16 at 10:49
no ..there wont be ny problem now since you are using delegate handlers using `document` – Amar Singh Feb 02 '16 at 10:59

score 2 · Answer 2 · answered Feb 01 '16 at 19:56

2

It is because you are binding the event before the element in question exists (because you are creating the element with javascript).

You need to either bind the event after creating it, or target your listener as follows

$('#joinedClients').on('hover', '.studentIcon', function() {
    console.log('hovering');
});

answered Feb 01 '16 at 19:56

calumbrodie

4,722
5
35
63

I was just about to update my answer with this when I saw you posted. – Cruiser Feb 01 '16 at 19:57
See this answer: http://stackoverflow.com/questions/21498458/jquery-bind-event-after-adding-element-dynamic – calumbrodie Feb 01 '16 at 19:58
Actually, it's okay to bind an event to the element in this case -- it does exist even if it's not in the DOM yet. Try this out: https://jsfiddle.net/4vxnnbef/2/ – Nick White Feb 01 '16 at 20:01
@YoYo It depends on jQuery version. – calumbrodie Feb 01 '16 at 20:10
this looked nice, but doesn't work. didn't i add the listener after (or better: *with*) creation with the first snippet? should i write a seperate function? – user3787706 Feb 01 '16 at 20:21
Make a https://jsfiddle.net/ with your minimum problem. Are you creating '#joinedClients' with javascript? What version of jquery are you using? – calumbrodie Feb 01 '16 at 21:06

score 1 · Answer 3 · answered Feb 01 '16 at 19:53

1

Since you're using JQuery, use .hover() :

$('.studentIcon').hover(//stuff);

answered Feb 01 '16 at 19:53

Cruiser

1,618
2
16
20

he wants as delegate handler – Amar Singh Feb 01 '16 at 20:07

score 1 · Answer 4 · answered Feb 01 '16 at 19:55

1

'hover' is not an actual event. jQuery provides a helper function .hover(enterfunc, leavefunc) that is equivalent to:

$('#mydiv').on({'mouseenter': enterfunc, 'mouseleave': leavefunc})

answered Feb 01 '16 at 19:55

Nick White

2,063
16
10

See [this documentation](https://api.jquery.com/hover/) for an example of how to use `hover()` – Nick White Feb 01 '16 at 19:56
tried it like this `$('.studentIcon').hover(function() { console.log('hovering'); }, function() { console.log('out'); });` nothing happens :/ – user3787706 Feb 01 '16 at 20:27

jquery hover not firing

4 Answers4