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

Answer 1

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

但是，如果您在这些DOM元素上手动调用show，那么您已经有了一个非常好的地方可以调用您喜欢的任何功能在节目电话会议之前。

在div加载之前触发事件

1 个答案: