Question

根据我的研究，我认为以下代码应该有效。

我使用jquery动态地将图像添加到页面，jquery从JSON文件中提取这些图像。出于这个原因，我需要使用jQuery的on()方法来允许此悬停工作。

我遵循jquery文档中的指导 - see here。

$(document).on('hover', ".portrait-image", function() {
    console.log('hi');
}, function () {
    console.log('bye');
});

此代码重复显示bye，而从不记录hi。

Answer 1

hover不是您可以与on一起使用的活动。它只是事件mouseenter和mouseleave的简写。所以你必须为你的代表团使用正确的名称。

从文档中可以看出：

.hover（）方法为mouseenter和mouseleave绑定处理程序事件。您可以使用它在行为期间简单地将行为应用于元素鼠标在元素中的时间。

所以重写你的听众：

$(document).on('mouseenter', '.portrait-image', function() {
    console.log('hi');
});

$(document).on('mouseleave', '.portrait-image', function() {
    console.log('bye');
});

或者像这样：

$(document).on({
    'mouseenter': function() {
        console.log('hi');
    },
    'mouseleave' function() {
        console.log('bye');
    }
}, '.portrait-image');

解释为什么只显示bye：

如documentation所示，on最多有四个参数。最后两个是data和handler。您的hi回调被解释为data，将被忽略。 handler是处理程序的实际bye回调。

hover是jQuery中的伪名称。它会做这样的事情：

$(document).on('mouseenter mouseleave', '.portrait-image', function() {
    console.log('hi');
});

这意味着每次enter或leave时，都会打印bye。

动态添加类后，jQuery悬停处理程序函数无法在unhover上工作

1 个答案: