javascript - 在加载 div 之前触发事件

Question

我正在尝试编写一个在页面上显示 div 之前执行的 JQuery 代码。看看下面的代码，它会帮助你理解我的问题:

$(document).ready(function(){
    $('.article').on('mouseenter', function(){
        $(this).css('background-color', "#ec5252").fadeTo('medium', 0.8);
        $(this).find('.articleHead h1').css('color', '#ffffff');
        $(this).find('.articleDetails p').css('color', '#ffffff');
    }).on('mouseleave', function(){
        $(this).css('background-color', '#ffffff').fadeTo('medium',1.0);
        $(this).find('.articleHead h1').css('color', '#414141');
        $(this).find('.articleDetails p').css('color', '#a2a2a2');
    }).on('click', function(){          
        var id = $(this).attr('data-id');
        $(location).attr('href','article.php?articleId='+id);       
    }).on('beforeShow', function(){
        alert('bout to show');
    }).on('afterShow', function(){
        alert('just shown');
    });
});

如您所见，为 .article 类指定了几个事件。但是，我想编写一个代码，在网页上显示带有 .article 类的每个 div 之前和 div 显示之后执行。此代码不适用于 beforeShow 和 afterShow 事件，但它适用于前三个事件，即 mouseenter、mouseleave 和 click。

Answer 1

问题是 beforeShow 和 afterShow 不是默认事件。除非将它们添加到 jQuery，否则它们将无法工作。有关示例，请参见 this fiddle .请记住，如果您使用该方法，您的 .article 元素将需要默认隐藏 (display: none;)，并且您必须手动调用 .show 在他们身上。

但是，如果您到了要在这些 DOM 元素上手动调用 show 的地步，那么您已经有了一个完美的位置，可以在显示之前调用您想要的任何函数打电话。