Javascript 新单击加载的图元上的悬停效果

我添加了一个悬停效果，效果很好，但问题是当我加载更多项目时（鼠标单击时），我的悬停效果不可见。 工作图像： 非工作部件：

这是我为悬停效果编写的代码：

 $('.holder').each(function() {
        var element = $(this);
        var width = $(this).parent().width();
        var height = $(this).parent().height();
        var img = $(this).find('img');
        var hover_in = $(this).find('.holder_in');
        var hover_in_w = $(this).find('.holder_in').width();
        var hover_in_h = $(this).find('.holder_in').height();
        hover_in.css({
            display: 'block',
            width: width - 40,
            bottom: -hover_in_h*3
        });
        $(this).on( 'mouseenter', function() {
            $(img).animate({
                opacity: 0.8
            }, 200);
            $(hover_in).animate({
                bottom: 20
            }, 200);
        }).on( 'mouseleave', function() {
            $(img).animate({
                opacity: 1
            }, 200);
            $(hover_in).animate({
                bottom: -hover_in_h*3
            }, 200);
        });
 });

感谢您抽出时间。

将

on（）

函数移到

each（）

函数之外

each（）

不能处理动态生成的元素

然后必须在

on（）

函数中移动变量

它应该会起作用

编辑：应将职能委派并重写为：

$(document).on('mouseleave', '.selector-class', function() {

---

你能试着把这些事件放到每个事件之外吗。我还创建了一个单独的函数，名为

ApplyEach

，每次绑定新图像时都需要调用它

//每次绑定某个图像时，将其称为：ApplyEach

function ApplyEach(){
  $('.holder').each(function() {
    var element = $(this);
    var width = $(this).parent().width();
    var height = $(this).parent().height();
    var hover_in = $(this).find('.holder_in');
    var hover_in_w = $(this).find('.holder_in').width();
    var hover_in_h = $(this).find('.holder_in').height();

    $(this).data('bottom', -hover_in_h*3);

    hover_in.css({
        display: 'block',
        width: width - 40,
        bottom: -hover_in_h*3
       });
  });
}


$(document).on( 'mouseenter', '.holder', function() {
    $(this).find('img').animate({
        opacity: 0.8
    }, 200);
    $(this).find('.holder_in').animate({
        bottom: 20
    }, 200);
})

$(document).on( 'mouseleave', '.holder', function() {
    $(this).find('img').animate({
        opacity: 1
    }, 200);
    $(this).find('.holder_in').animate({
        bottom: $(this).data('bottom');
    }, 200);
});

---

使用

bind（）

而不是

on（）

，试试看，告诉我有很多方法可以改进这一点

为了支持动态添加的元素，您通常求助于委托事件处理程序<代码>打开支持连接到不更改的祖先元素。这是通过侦听事件，然后应用jQuery选择器来实现的。这意味着元素只需要在事件发生时匹配，而不需要在事件注册时匹配。如果没有更接近/更方便的方法，则默认祖先是

文档

尽可能重复使用选择器结果，不要在DOM中重新查询它们。只需将它们保存到一个变量。您有一个名为element的变量，但它从未被再次使用过

此外，您需要尝试确保css设置代码在第一个

鼠标输入之前运行。我通过在所有持有者上触发一个假的
mouseleave
事件来做到这一点

$(document).on('mouseenter', '.holder', function () {
    var img = $('img', this);
    $(img).animate({
        opacity: 0.8
    }, 200);
    $('.holder_in', this).animate({
        bottom: 20
    }, 200);
});

$(document).on('mouseleave', '.holder',  function () {
    var element = $(this);
    var height = element.parent().height();
    var hover_in = element.find('.holder_in');
    var hover_in_h = hover_in.height();
    var width = element.parent().width();

    hover_in.css({
        display: 'block',
        width: width - 40,
        bottom: -hover_in_h * 3
    });

    $('img', this).animate({
        opacity: 1
    }, 200);
    hover_in.animate({
        bottom: -hover_in.height() * 3
    }, 200);
});

// Trigger initial state
$('.holder').trigger('mouseleave');

JSFiddle:

注意，您仍然需要至少运行
$（'.holder'）.trigger（'mouseleave'）加载任何新元素后。我确信可以将初始状态添加到样式中，但您需要显示更多的实际HTML。
这类问题也确实需要示例HTML（例如在JSFIDLE中）。我使用的是公司产品，因此无法输出完整代码，我试图向您介绍我添加的图像和js hover的问题。hover从支架获得宽度和高度：正如您在第二次打印时看到的，新加载的项目没有从支架获得宽度和高度：没有初始样式，hover_的动画没有什么意义。从这个JSFIDLE开始，让它完成您的初始任务。这将给每个人一个工作的起点：）请检查：这是我的悬停效果，如果我在新的悬停支架上单击“无宽度和高度”加载更多项目。悬停块获取加载时的宽度和高度，这就是为什么其他加载后的项目看不到大小的原因。谢谢。这会有帮助，但缺少一个关键点。它们也需要是委托事件处理程序。
on（）
是委托事件。它替换了不推荐使用的
live（）
和
delegate（）
。我同意OP应该将函数重写为
$（document）。on（'mouseleave'，'#selector'，function（）{
确实如此。您的回答根本没有提到将它们转换为委托。注意：
#selector
（强调
#
）可能是委托处理程序的最糟糕示例，因为它意味着ID匹配（其中只能有一个匹配项）：）更好。现在只需键入整个解决方案，将其涂成绿色，我们就完成了：）
on
现在比
bind
更可取，并允许委派事件处理程序（此问题可能需要委派事件处理程序）@TrueBlueAussie唯一需要的变量似乎是
-hover\u in_h*3
，我认为我们可以使用
data
将此值附加到图像上，请参阅updateHandy解决方法。我建议只需重构鼠标处理程序中的计算，而不是采用两阶段方法。然后，它就可以在不调用g
ApplyEach
：）非常感谢。使用您的示例进行了测试，它可以开箱即用。再次感谢；）@Madizm:如果我们从示例HTML开始，可能会更快：）