如何在Ajax頁面加載後執行jQuery函數

我正在構建使用Ajax加載所有內容頁面的Wordpress網站。這是jQuery localScroll插件的問題。該插件將向頁面上的所有錨鏈接添加動畫滾動。問題是，使用下面的腳本我只能在頁面上的一個鏈接被點擊後才能在該頁面上有動畫。如何在Ajax頁面加載後執行jQuery函數

我想我明白爲什麼會發生這種情況。我的猜測是，我點擊主菜單後腳本將執行，但由於Ajax內容尚未加載，事件不會附加到Ajax加載的內容鏈接。現在我卡住了，我不知道如何解決這個問題。你介意幫助我這個嗎？

預先感謝您。

$(function(){ 
    $('a').live('click', function() { 
     $('#portfolioWrap').localScroll({// Only the links inside that jquery object will be affected 
      target: '#portfolioWrap', // The element that gets scrolled 
      axis:'y', // Horizontal scrolling 
      duration:1500 
     }); 
    }); 
});

編輯

只是說明給別人後，我設法使這項工作。我在這裏嘗試了所有建議。我的猜測是由o.v提出的解決方案。和Ohgodwhy應該工作，但可能是由於網站的複雜性和可能的插件限制，我無法讓他們工作。例如.on函數根本不起作用，儘管我使用的是jQuery 1.7.1。最後我實施了Just_Mad建議的ajaxComplete，並且工作。感謝大家的幫助！

這是代碼：

$(function() { 
    $('#wrapperIn').ajaxComplete(function() { 
     $('#portfolioWrap').localScroll({ 
      target: '#portfolioWrap', // The element that gets scrolled 
      axis:'y', // Horizontal scrolling 
      duration:1500 
     }); 
    }); 
});

來源

2012-03-15 Klikerko

.live實際上並未將事件附加到元素。它實際上是監聽整個文檔的事件，然後看看你的'a'過濾器是否匹配。 – GoldenNewby 2012-03-15 07:20:47

如果您使用jQuery.ajax加載AJAX內容，您可以嘗試綁定到ajaxComplete事件，以獲得當任何ajax完成時。

來源

2012-03-15 07:30:28

添加一個回調到AJAX負荷，良好的開始是在http://api.jquery.com/jQuery.ajax/下「成功回調」

我會給出更具體的建議，但你的片段有點孤立，也許如果你創建了一個jsfiddle？

來源

2012-03-15 07:25:04

詳細說明了GoldenNewby說過的，用jQuery 1.7中引入的.on（）方法來監聽/附加。

$(function(){ 
    $('body').on('click', 'a', function() { 
    $('#portfolioWrap').localScroll({ 
     target: '#portfolioWrap', // The element that gets scrolled 
     axis:'y', // Horizontal scrolling 
     duration:1500 
    }); 
    }); 
});

無需使用AJAX回調的收聽/結合的元素。上述功能將在頁面加載時或加載頁面後，在正文 {}內找到的所有元素上設置點擊功能。這包括所有動態創建的鏈接。

{} - 將'body'更改爲任何Container具有ajax數據。 I.E. #portfolio包裹

來源

2012-03-15 07:26:09 Ohgodwhy

你可能想限制一下比整個'body'更具體的東西。將容器用於加載AJAX的內容。 – steveax 2012-03-15 07:36:15

編輯以反映手持。 – Ohgodwhy 2012-03-15 07:44:05

如何在Ajax頁面加載後執行jQuery函數

回答

相關問題