在append()div内容之后悬停事件不起作用

时间:2013-07-07 16:07:12

标签: jquery jquery-hover

点击.thumb

时,我尝试使用jquery将.button附加到另一个最后一个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上的点击功能

我非常感谢这里的一些帮助,谢谢!

3 个答案:

答案 0 :(得分:2)

问题是附加事件侦听器时附加的内容不存在。在父元素上使用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();
});

答案 1 :(得分:2)

你必须使用委托:

DEMO

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

$('.box').on('click','.close',function () {
    $(this).parent().fadeOut('slow');
});

答案 2 :(得分:0)

阿尔特:

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

要:

$('.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);
    $('.thumb').hover(function() {
    $(this).find('.close').fadeIn();
}, function() {
    $(this).find('.close').fadeOut();
});
$('.close').click(function() {
    $(this).parent().fadeOut('slow');
});
});

这将再次附上事件。