如何让jQuery 1.7 .on（）悬停？

问题描述

我在动态创建悬停状态元素时遇到问题。当我悬停在新创建的HTML元素上时，它不起作用。

这是我的HTML代码：

 < button id =create>建立新的按钮< / button> 
< button class =hover> hover me< / button> 
< div>< / div> 
  

jQuery：

  var createBtn = $（＃create）; 
 $ b createBtn.click（function（）{
 $（'div'）。append（'< button class =hover>新的悬停按钮< / button'）; 
返回false; 
}）; 
 
 $ b $（'。hover'）。hover（function（）{
 alert（'you hovered the button！'）; 
}，function（） {
 alert（'您从按钮悬停！'）; 
}）; 
  

我甚至试过这段代码：

<$ p $（$。$ h $'$）$（'。$ h $'）。$（$。$ h $'$。 ，
mouseleave：function（）{
alert（'you removed the hover from button！'）;
}

}）;

如下所示，但仍然没有运气。
这里还有演示：

解决方案

这是不正确的语法。

使用它来监听您的事件以获取动态创建的'.hover '元素：

  $（document）.on（'mouseenter'，'.hover'，function（）{
'alert（'you hovered the button！'）; 
））。on（'mouseleave'，'.hover'，function（）{
 alert（'你从按钮悬停！'） ; 
}）; 
  

I'm having a problem with dynamically created elements on hover state. When I hover on newly created html element, it doesn't work.

Here's my HTML code:

<button id="create">create new button</button>
<button class="hover">hover me</button>
<div></div>

jQuery:

var createBtn = $("#create");

createBtn.click(function() {
    $('div').append('<button class="hover">new hover button</button');  
    return false;        
}); 


$('.hover').hover(function() {
    alert('you hovered the button!');
}, function() {
    alert('you removed the hover from button!');
});

I even tried this code:

$('.hover').on({
    mouseenter : function() {
         alert('you hovered the button!');
    },
    mouseleave : function() {
        alert('you removed the hover from button!');
    }

});

as shown here http://api.jquery.com/on/, but still no luck.Here's also demo: http://jsfiddle.net/BQ2FA/

解决方案

This isn't the correct syntax.

Use this to listen to your events for dynamically created '.hover' elements :

$(document).on('mouseenter', '.hover',  function(){
         alert('you hovered the button!');
}).on('mouseleave', '.hover', function() {
        alert('you removed the hover from button!');
});

这篇关于如何让jQuery 1.7 .on（）悬停？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！