Question

我在选择JS动态注入的一系列链接时遇到了一些问题。基本上，构建了一个youtube列表并将其加载到DOM中。现在我想为它添加更多的炫耀（没有CSS动画，我在这里的挑战，真正测试动态jQuery页面的限制并获得乐趣）

但它只是选择了在DOM之后加载的元素，我尝试了大量搜索无法解决的解决方案。虽然我有几只熊，但到目前为止它已经过了1分钟。生日快乐！

以下是我正在尝试的内容，你可以看到它在行动中（相当失败）here

        $('.featured-video-link').each(function(){  // featured-video-links is added after DOM too
            $(this).live({
                mouseenter: function () {
                    $(this).find('.feat-vid-title').animate({ 'backgroundColor': 'rgba(62, 132, 210, 0.8)', 'color': 'rgba(255,255,255,1.0)' }, 'slow');
                },
                mouseleave: function () {
                    $(this).find('.feat-vid-title').animate({ 'backgroundColor': 'rgba(0,0,0,0.5)', 'color': 'rgba(255,255,255,0.8)' }, 'slow');
                }
            });         
        });

Answer 1

您不必遍历每个元素来绑定事件。只需这样做

$(".featured-video-link").hover(
    function() {
        $(this).find('.feat-vid-title').animate({ 'backgroundColor': 'rgba(62, 132, 210, 0.8)', 'color': 'rgba(255,255,255,1.0)' }, 'slow');
    }, function() {
       $(this).find('.feat-vid-title').animate({ 'backgroundColor': 'rgba(0,0,0,0.5)', 'color': 'rgba(255,255,255,0.8)' }, 'slow');
    }
);

Answer 2

您可以使用以下语法，而不需要循环，

$(document).on({
    mouseenter: function () {
        $(this).find('.feat-vid-title').animate({
            'backgroundColor': 'rgba(62, 132, 210, 0.8)',
            'color': 'rgba(255,255,255,1.0)'
        }, 'slow');
    },
    mouseleave: function () {
        $(this).find('.feat-vid-title').animate({
            'backgroundColor': 'rgba(0,0,0,0.5)',
            'color': 'rgba(255,255,255,0.8)'
        }, 'slow');
    }
}, '.featured-video-link');

在DOM之后加载的元素上使用.each

2 个答案: