javascript - jquery hover not firing - Stack Overflow

admin管理员组

文章数量:1279013

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 es 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?

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 es 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?

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Feb 1, 2016 at 19:50 user3787706user3787706 65911 gold badge77 silver badges1818 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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.

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');
});

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

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

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

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

本文标签： javascriptjquery hover not firingStack Overflow