在div加载之前触发一个事件

我试图编写一个在页面上显示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之前执行.article类在网页上显示并在div展示之后执行。此代码仅适用于beforeShow和afterShow事件，但它适用于前三个事件，即mouseenter，mouseleave和click。

来源

2014-12-02 Tatenda

你的代码片段在html框中有javascript，没有html。 – Jamiec 2014-12-02 17:47:42

我猜想它不应该是$（document）.ready函数的一部分，而是在一个单独的函数之前... – IonicBurger 2014-12-02 17:49:18

那么这段代码只是我正在使用的jQuery代码的一个例子。与该代码一起使用的HTML将是

@Jamiec – Tatenda 2014-12-02 17:51:17

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

但是，如果您在这些DOM元素上手动调用show，那么您已经有了一个非常好的地方，可以在演出前调用您想要的任何功能。

来源

2014-12-02 17:57:06 jamesism

在div加载之前触发一个事件

回答

相关问题