2012-03-26 133 views
-1

我想建立一個網站,所以當頁面加載時有一個div,動態地從我設置的.html頁面中提取它的內容。在頂部有一堆縮略圖,當你點擊一個時,我希望來自不同的.html文檔的內容替換第一次動態加載的每個div。jquery .load()不工作onclick

爲此,我試圖使用jquery .load()功能。我試圖做的是建立一個功能:

<script type="text/javascript"> 
$(document).ready(function space_load() { 

$('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html'); 
} 
</script> 

,然後試圖用啓動它:

onclick="space_load();" 

這個沒有工作,我想知道是否有人能幫助我。我想知道的另一件事是,如果這是行得通的,它會替換之前加載到那裏的內容嗎?我可能會得到自己的頭,它只是自己做。

回答

5

首先,你的代碼具有無效結構

$(document).ready(function() {  
    function space_load() { 
     $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html'); 
    }  
    space_load(); //Now call the function 
}); 

但是,您可以修剪下來做這個

$(function() { 
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html'); 
}); 

但是,既然你想這對元素的點擊。 這是你所需要的:

$(function() { 
    $("#yourlinkid").click(function() { 
     $('#SPACE_TOTAL') 
      .html('<img src="preloader.gif" />') 
      .load('http://www.klossal.com/portfolio/space.html'); 
    }); 
}); 
+0

它被提及的早,我沒有想到這一點,但有沒有辦法給它一個負載.gif,當它完成加載時消失? – loriensleafs 2012-03-26 12:52:06

+0

@loriensleafs,檢查我最後一個代碼塊中的更新。 – Starx 2012-03-26 12:54:02

+0

它完成加載後就會消失? – loriensleafs 2012-03-26 13:02:05

4

您是否需要在此處使用document.ready?我想你可以簡單地在點擊發生時調用該函數。

<script type="text/javascript"> 
function space_load() { 
    $('#SPACE_TOTAL').load('http://www.klossal.com/portfolio/space.html'); 
} 
</script> 

然後......

onclick="space_load();" 

會假設#SPACE_TOTAL不是被動態填充在運行時,此時你需要包裝一個document.ready的容器。

+0

時顯示保證完全準備好DOM的聯繫? – AndreKR 2012-03-26 12:30:07

+0

是的,我同意,但繼續發佈的內容沒有規定這是事實。 – SpaceBison 2012-03-26 12:30:49

+0

我曾經想過使用它,#SPACE_TOTAL是網址加載到的div?實際上我沒有想過裝載部分,好點。 – loriensleafs 2012-03-26 12:44:21

2

起初,您不需要$(document).ready();第二,您忘記關閉ready()方法。在JS的結尾處缺少);