javascript - 在悬停时在动态生成的类中添加事件

Question

我正在尝试循环悬停效果，使图像跳到网站的四个 Angular (左上角 -> 右上角 -> 右下角 -> 左下角 -> 然后回到左上角 Angular )

我这样做的方法是添加一个类，hoverleft、right、down、up 等，然后删除之前的类。我遇到的问题是页面加载后无法识别动态添加的类。我一直在尝试使用 .on() 函数，但遇到了困难。不知道为什么，但很确定我只是遗漏了一些简单的东西。

这是我所拥有的，先是 HTML，然后是 JS:fiddle here: http://jsfiddle.net/5w0nk6j9/4/

<div class="bodycontainer">
<div id="kim">
    <div id="dance" class="dancingkim">
    <div class="header">
        <h2 class="introheader">Hover original</h2>
    </div>
        <img src="http://placehold.it/240x208" />
</div>
</div>

$('#kim').hover(function(){
    $(".header h2").text("Hover text");
    });
    $('#kim').hover(function(){
    $(".dancingkim").css("cursor", "pointer");
});

$('.dancingkim').hover(function(){
    $(this).addClass("hoverleft");
    $(this).removeClass("dancingkim");
});

$('#kim').on('hover', '.hoverleft', function() {
    $('#dance').addClass("hoverdown");
    $('#dance').removeClass("hoverleft");
});

Answer 1

代替悬停，尝试使用 mouseover 或 mouseenter 或 mouseleave。

$('#kim').on('mouseover', '.hoverleft', function() {
    $('#dance').addClass("hoverdown");
    $('#dance').removeClass("hoverleft");
});

从JQuery源码来看，hover不包含在触发导致JQuery .on()的事件列表中