Question

我在domready之后添加了有套接字消息的新客户端。我想在悬停时扩展它们。

在这里阅读一些答案，但没有任何效果。我不知道为什么

我试过

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

和

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

但即使是＆＃34;悬停＆＃34;控制台日志出来了。选择器是正确的，如果我记录它，它会突出显示确切的元素。确保：

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

这里有什么问题？

Answer 1

使用if代替

if

或使用

mouseover

$(document).on('mouseover', '.studentIcon',function() { console.log('hovering'); $(this).toggleClass('closed').toggleClass('open'); });方法绑定$(document).on("mouseenter mouseleave", ".studentIcon", function (e) { if (e.type == "mouseenter") { // check if it is mouseenter, do something } else { // if not, mouseleave, do something } });和.hover()的处理程序 mouseenter个事件。您可以使用它来简单地将行为应用于鼠标在元素中的元素。

Answer 2

这是因为您在有问题的元素存在之前绑定事件（因为您使用javascript创建元素）。

您需要在创建事件后绑定事件，或按以下方式定位您的侦听器

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

Answer 3

由于您正在使用JQuery，请使用.hover（）：

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

Answer 4

'hover'不是实际的事件。 jQuery提供了一个帮助函数 .hover(enterfunc, leavefunc)，相当于：

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

jquery悬停不开火

4 个答案: