动态添加类后，jQuery 悬停处理函数在取消悬停时不起作用[重复]

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

我使用 jquery 动态地将图像添加到页面，它从 JSON 文件中提取这些图像。因此我需要使用 jQueryon() http://api.jquery.com/on/方法来允许此悬停工作。

我正在遵循 jquery 文档中的指导——see here http://api.jquery.com/hover/#hover1.

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

这段代码反复显示bye虽然从不记录hi.

hover不是您可以使用的事件on。这只是事件的简写mouseenter and 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显示：

就像在文档 http://api.jquery.com/on/, on最多有四个参数。最后两个是data and handler. Your hi回调被解释为data并将被忽略。这handler是实际的bye处理程序的回调。

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

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

这意味着每次你enter OR leave，它将打印bye.