悬停问题动态创建的div

Question

所以我有一个div，它是从另一个div上创建的，它工作正常。

我附加到document.body，因为它应该是一个弹出窗口。

当我将悬停处理程序分配给新div时，它会在检查器中编译并显示，但实际上并不会触发事件，这两个事件都是控制台日志。

我不确定为什么它会在检查员中显示为事件而不起作用，但是，我通常在第一时间没有正常工作。

以下是完整的代码。

$(function(){
$('.trackOptions').click(function(e){
    id = this.id;
    var x = e.pageX-20 + 'px';
    var y = e.pageY-20 + 'px';
    var div = $('<div class ="optionsPop">').css({
        "position": "absolute",                    
        "left": x,
        "top": y
    });
    $(document.body).append(div);   

});

$(document).on('hover', '.optionsPop',
    function(e){
        console.log('Hovering');
    },
    function(e){
        console.log('Out of optionPop Hover');
        $(this).remove();
    }
);
});