Javascript 在加载div之前触发事件

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

$(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类指定了几个事件。但是，我想编写一段代码，在网页上显示每个div之前和div显示之后执行。article类。此代码不适用于beforeShow和afterShow事件，但适用于前三个事件，即mouseenter、mouseleave和click

问题是

之前的放映

和

之后的放映

都不是默认事件。除非将它们添加到jQuery中，否则它们将无法工作。有关这方面的示例，请参见。请记住，如果使用这种方法，则默认情况下需要隐藏

.article

元素（

display:none；

），并且必须手动调用

.show

）

---

但是，如果您在这些DOM元素上手动调用

show

，那么在show调用之前，您已经有了一个非常好的位置来调用您想要的任何函数。

您的代码片段在html框中有javascript，没有html。我想它不应该是$（document）.ready函数的一部分，但是在前面的一个单独的函数中，代码片段只是我正在使用的jquery代码的一个示例。但是，与该代码一起使用的html将是@Jamiec@HappyHamburger让我试试。感谢you@user2497008-代码片段用于演示一些工作（或不工作）的代码，其功能类似于JSFIDLE。如果您只想在问题中添加一些代码，只需突出显示并单击“代码”按钮。我更新了你的问题。