我在悬停状态下动态创建元素时遇到问题.当我将鼠标悬停在新创建的html元素上时,它不起作用.
- <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!');
- });
我甚至试过这段代码：
- $('.hover').on({
- mouseenter : function() {
- alert('you hovered the button!');
- },mouseleave : function() {
- alert('you removed the hover from button!');
- }
- });
如图所示http://api.jquery.com/on/,但仍然没有运气.
这里也是演示：http://jsfiddle.net/BQ2FA/
解决方法
这不是正确的语法.
使用它来监听动态创建的“.hover”元素的事件：
- $(document).on('mouseenter','.hover',function(){
- alert('you hovered the button!');
- }).on('mouseleave',function() {
- alert('you removed the hover from button!');
- });
