.on('hover') 不适用于附加元素

Question

我正在使用按钮将一些文本附加到 div 上，并希望当您将鼠标悬停在它上面时（附加后）发生一些事情。我试过使用 .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

使用 mouseover 或 mouseenter 而不是 hover。 .on('hover') 在 jQuery 1.8 中被弃用，并在 1.9 中被移除。

$('.receiver').on('mouseover', ...

http://api.jquery.com/on/

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.

Answer 2

'hover' 伪事件已过时并从 jQuery 1.9 开始被删除。使用 '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>

Answer 3

var text = "YOU CLICKED ME"

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

$('.receiver').on('mouseenter','.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>

.on('hover') 不适用于附加元素

.on('hover') won't work on appended elements

javascript

jquery

hover

append

jquery-events

摘自jQuery.on documentation：

工作示例：