javascript - .on ('hover' ) 不适用于 append 元素

Question

我正在使用一个按钮将一些文本 append 到一个 div 上，并希望当您将鼠标悬停在它上面时(在它被 append 之后)发生一些事情。我尝试使用 .on('hover' '.class') 但到目前为止还无法让它工作。任何帮助将不胜感激。

这是我正在谈论的示例(我希望当您将鼠标悬停在 YOU CLICKED ME! 时发生一些事情)。

var text = "YOU CLICKED ME"

$(".button").click(function () {
    $(".receiver").append('<a class="appendage">'+text+'</a>');                  
                   });

$('.receiver').on('hover', '.appendage', function(){
    $(".tooltip").append('<a class="tooltip">'+text+'</a>');                  
                   });

.receiver {
    height:300px;
    border: 1px solid black;
}
.tooltip {
    height:300px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>CLICK ME</div>
<div class='receiver'></div>
<div class='tooltip'></div>

Answer 1

自 jQuery 1.9 起，'hover' 伪事件已过时并被删除。请改用 'mouseenter mouseleave'，或者仅使用 'mouseenter' 可能更可取。

摘自jQuery.on documentation :

Deprecated in jQuery 1.8, removed in 1.9: The name "hover" used as a shorthand for the string "mouseenter mouseleave". It attaches a single event handler for those two events, and the handler must examine event.type to determine whether the event is mouseenter or mouseleave. Do not confuse the "hover" pseudo-event-name with the .hover() method, which accepts one or two functions.

工作示例:

var text = "YOU CLICKED ME"

$(".button").click(function () {
    $(".receiver").append('<a class="appendage">'+text+'</a>');                  
                   });

$('.receiver').on('mouseenter mouseleave', '.appendage', function(){
    $(".tooltip").append('<a class="tooltip">'+text+'</a>');                  
                   });

.receiver {
    height:300px;
    border: 1px solid black;
}
.tooltip {
    height:300px;
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='button'>CLICK ME</div>
<div class='receiver'></div>
<div class='tooltip'></div>