在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加載之前觸發一個事件

回答

相關問題