2010-05-13 128 views
0

我一直在尋找一段時間,一直沒有找到任何符合我的問題,我甚至不知道我能解釋得很好,所以採取這是值得的。ajax加載的內容中的jQuery代碼只運行一次

我有一個頁面通過AJAX(使用.load()方法)將內容加載到div中。導航中有幾個鏈接,這意味着在瀏覽網站時內容會發生變化,而不會刷新整個頁面。 (實際上,說實話,我只是把css-tricks.com的DocTemplate佈局[http://css-tricks.com/examples/DocTemplate/]弄成了碎片。顯然,雖然我不是一個重新發明輪子類型的程序員,但我是一個反對輪不停地讓它工作程序員)。

所以,index.php加載一些div中的數據庫內容。 index.php上還有一個jQuery UI模式輸入表單。基本上,頁面上唯一的HTML是一個空的div和一個表單。這一切工作正常,直到我打電話給另一頁,然後去到index.php。數據庫內容沒有加載,我的表單在所有裸露的榮耀中都顯示出來。我知道這是爲什麼發生。該頁面未刷新,沒有任何代碼加載內容並隱藏表單。

我的問題是,我怎樣才能確保AJAX .load()和.dialog()將再次加載index.php時運行?它甚至有可能嗎?

謝謝,並且我對這個長度表示歉意。當我困惑時,我會變得冗長。

回答

0

一個簡單而快速的解決方案是禁用index.php緩存。你可以通過發送適當的Http頭來完成。這樣你的頁面總是會重新加載。

+0

我不能肯定,將工作。我可能應該提到瀏覽器永遠不會離開index.php。點擊導航鏈接將blah.php加載到index.php的div上,導致一個URL如下所示:index.php#blah.php。我試圖刷新頁面,但不會將其他頁面加載到div中。 – 2010-05-13 13:39:31

0

你的問題不是很容易理解。看來你正在使用瀏覽器的按鈕回到你的index.php文件?

當您點擊後退按鈕時,瀏覽器將重新加載頁面,因爲它最初加載時(即處於任何用戶交互之前的狀態)。

因此瀏覽器顯示裸露頁面是正常的。

它要處理後退按鈕一般多在Ajax應用程序的瀏覽器的歷史記錄,您可以使用現有的jQuery的歷史插件,像this one

我希望它會幫助你,

傑羅姆瓦格納

+0

呃,是的,我知道這有點粗糙。但是,我沒有使用後退按鈕。我點擊導航鏈接將頁面內容加載到div中......我不確定這是否有幫助。 – 2010-05-13 13:43:15

0

您可以添加一些邏輯,以便當您的頁面加載完成後,您檢查是否填充動態區域。如果不是,請運行​​例程。

$(document).ready(function() { 
    if($('div#theDIV').find('something_that_should_be_there').length == 0) { 
     $('div#theDIV').load('etc,etc') 
    } 
}) 
+0

頁面加載後出現問題。主頁面加載,index.php運行其jQuery罰款。然後,我點擊另一個導航鏈接,將about.php加載到之前由index.php中的內容佔據的div中。這工作正常,所有ajaxy和spiffy樣。然後,我點擊主頁導航鏈接以恢復index.php內容 - 其中包含jQuery代碼。由於頁面永不刷新,jQuery無法運行。地獄,即使我現在混淆了自己。 – 2010-05-13 13:46:20

0

我明白了。當內容再次加載時,我必須手動重新綁定.load()回調函數中的事件。

0

問題是.bind()僅綁定當前存在的元素.bind()運行。由於您稍後在ajax中加載更多內容,在運行.bind()之後,新元素將不會綁定事件。 有2種解決方法,此:

  • 或者,像你這樣,重新綁定元件各自AJAX負載
  • 後或使用.live()而不是.bind()。
    .bind()的語法類似於
    $('element').bind('some-event', function() {blabla});。 'some-event'是你綁定的任何事件:click/submit/mouseover/etc。
    .live()是完全一樣的:
    $('element').live('some-event', function() {blabla});

注意,有共同的活動速記符號:

$('element').click(function() {blabla}); // These are equivalent to 
$('element').bind('click', function() {blabla}); // You need to use .on() 
$(document).on('click', 'element', function() {blabla});