jquery - 悬停事件在追加()div内容后不起作用

Question

当单击.button时，我尝试使用jquery将.thumb附加到另一个最后一个div中

这是 jquery 函数:

$('.thumb').hover(function() {
    $(this).find('.close').fadeIn();
}, function() {
    $(this).find('.close').fadeOut();
});
$('.close').click(function() {
    $(this).parent().fadeOut('slow');
});
$('.button').click(function() {
    $html = '<div class="thumb">';
    $html += '<img src="http://findicons.com/files/icons/1979/social/50/wordpress.png" />';
    $html += '<div class="close">X</div>';
    $html += '</div>';
    $('.box').append($html);
});

http://jsfiddle.net/UfyQq/

我在这段代码中遇到的障碍是附加的div不遵守悬停事件或在.close上使用点击功能

我非常感谢这里的帮助，谢谢!

Answer 1

问题是附加事件监听器时附加的内容不存在。使用jQuery's .on()在父元素上修复此问题。

check this working jsFiddle

$('.box').on('mouseenter','.thumb',function() {
    $(this).find('.close').fadeIn();
});

$('.box').on('mouseleave','.thumb',function() {
    $(this).find('.close').fadeOut();
});