工作示例：

Question

我使用按钮将一些文字附加到div上，并希望当您将鼠标悬停在div上时（在它被追加之后）。我尝试使用.on('hover' '.class')，但到目前为止还没有能够让它发挥作用。任何帮助将不胜感激。

以下是我所谈论的一个例子（我希望当你悬停YOU CLICKED ME!时会发生一些事情。）

＆＃13;

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>');                  
                   });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

使用mouseover或mouseenter代替hover。 jQuery 1.8中不推荐使用.on('hover')，并在1.9中删除。

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

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

在jQuery 1.8中不推荐使用，在1.9中删除：名称“hover”用作字符串“mouseenter mouseleave”的简写。它为这两个事件附加单个事件处理程序，并且处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要将“hover”伪事件名称与.hover（）方法混淆，后者接受一个或两个函数。

Answer 2

{j} 1.9之后，'hover'伪事件已过时并被删除。请改为使用'mouseenter mouseleave'，或仅使用'mouseenter'。

摘自jQuery.on documentation：

在jQuery 1.8中不推荐使用，在1.9中删除：名称"hover"用作字符串"mouseenter mouseleave"的简写。它为这两个事件附加单个事件处理程序，处理程序必须检查event.type以确定事件是mouseenter还是mouseleave。不要混淆＆＃34;悬停＆＃34;使用.hover()方法的伪事件名称，该方法接受一个或两个函数。

工作示例：

＆＃13;

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>');                  
                   });

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

＆＃13;

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>');                  
                   });

＆＃13;

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

＆＃13;

<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>

＆＃13;

.on（'hover'）不会对附加元素起作用

3 个答案:

摘自jQuery.on documentation：

工作示例：