jquery多個加載到div

我想做一個頁面有4個可配置的部分，所有這些將提供用戶相同的輸入，但最終是4個獨特的配置設置。jquery多個加載到div

我正在使用一個通用的基本頁面來做到這一點，但遇到了Jquery選擇器無法區分不同div之間的區別，但都來自於同一頁面的問題。起初我認爲這是特定的，所以創建了一個較小的測試頁面，但最終似乎也有同樣的問題。

的test.html如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
    $('#div1').load("test2.html"); 
    $('#div2').load("test2.html"); 
}); 
</script> 
<div id="div1"></div> 
<div id="div2"></div> 
</body> 
</html>

test2.html如下：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery/js/jquery-1.8.2.min.js"></script> 
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.24.custom.min.js"></script> 
</head> 
<body> 
<script type="text/javascript"> 
function testing() 
{ 
    alert("Alert: " + $('#test').val()); 
} 
</script> 
<div id="testing"> 
<input id="test" onchange="testing()"></input> 
</div> 
</body> 
</html>

如果不能做到這一點這將是一個更好的方式方法不對，我理解我可以使用iframe，但是我能夠訪問輸入框中的值，其中包含其他頁面中的輸入框。

我已經在ubuntu上測試過這個firefox 15.0.1

謝謝。

來源

2012-10-03 Dizzle

s如果您無法對test2.html進行更改，則可以使用下面的代碼。下面的代碼將只抓取元素的正文部分。

$('#div1').load('test2.html body');

，如果你可以改變的test2.html刪除所有腳本和身體部位，並確保你只包括什麼是需要。

或者如果你可以放一個包含你想要的HTML部分的包裝器，它會更好。那麼你可以得到像這樣的特定div。

$('#div1').load('test2.html #container');

你這個關鍵字，而不是專門說div的名稱。它將允許你獲得輸入改變的div。

檢查以下鏈接。它會幫助你。 TRY DEMO。

希望這會幫助你。如果您有任何問題，請不要猶豫，問。

來源

2012-10-03 07:34:33 Techie

這看起來像我們的首選解決方案，謝謝我現在就試用它。 – Dizzle

不要忘記把它作爲答案，如果這可以幫助你。只是提醒，因爲你是新的stackoverflow – Techie

對不起，它需要一段時間接受:) – Dizzle

首先，你不應該在jQuery的load（）方法中使用完整的HTML文檔。你應該只有div的內容。例如。沒有文檔類型，沒有html或body標籤。只是身體本身。其次：元素標識符在任何頁面上都應該是唯一的。當你加載第一個div的內容時，它會創建一個id = testing的div元素。當您第二次加載它時，它會嘗試創建它的另一個副本，但具有相同的標識符。

標識符必須是唯一的。（這是他們如何識別...）

另一種解決方案是用ajax（）加載內容，然後從Javascript代碼中替換標識符，最後調用$（「＃div1」）。html（replaced_html_content）。但如果我是你，我不會那樣做。使用服務器端腳本並提供查詢參數。

來源

2012-10-03 07:25:58 nagylzs

嗨，感謝您的回覆，這是我們將考慮的事情。 – Dizzle

jquery多個加載到div

回答

相關問題