3

クリックしたときにjqueryを使用.thumbして別の最後のdivに追加しようとしています.button

これは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

ここで助けていただければ幸いです、ありがとう！

4

3 に答える 3

4

問題は、イベント リスナーをアタッチすると、追加されたコンテンツが存在しないことです。これを修正するには、親要素でjQuery.on()を使用します。

この動作中のjsFiddleを確認してください

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

$('.box').on('mouseleave','.thumb',function() {
    $(this).find('.close').fadeOut();
});
于 2013-07-07T16:09:45.580 に答える
2

委任を使用する必要があります。

デモ

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

$('.box').on('click','.close',function () {
    $(this).parent().fadeOut('slow');
});
于 2013-07-07T16:11:03.003 に答える
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');
});
});

これにより、イベントがもう一度添付されます。

于 2013-07-07T16:13:37.197 に答える