爲什麼修改div的html內容（使用JQuery）也改變了我的頁面的其餘部分？

我想使用JQuery在我的頁面中的div中加載一個頁面。變量「data」存儲一個字符串，它是我想要加載的頁面的html內容。爲什麼修改div的html內容（使用JQuery）也改變了我的頁面的其餘部分？

我正在使用命令：$("#content").html(data); 其中「content」是我想要加載頁面的div的id。

問題在於，儘管這對一些頁面（只是div更改的內容和頁面的其餘部分保持與以前一樣）的預期工作狀態，但在某些其他情況下，頁面將加載到div元素之外，在我的頁面頂部並繼續瀏覽我的頁面的其他元素，即使它們不在「內容」div中。

來源

2014-04-12 Eleni

你確定你沒有也使用相同的ID其他地方可能？ – 3Nex

當你說「變量」數據「存儲的字符串是我想加載的頁面的html內容。」你的意思是包括HTML 等，或者它只是一個HTML片段？否則，我會檢查你沒有一個不匹配的元素（例如

without

或類似）無論是在容器頁面或 – Adam

加載的頁面是的，這只是我已經使用該ID的地方。 – Eleni

我不知道肯定會解決這個問題，但你真的不應該包括在一個div整個網頁（HTML計有和頭部標記）。每個頁面應該有一個html標籤，一個head標籤和一個body標籤。

有兩個選項：

載荷子頁面中的iframe
載荷子頁面的主體中的div內容

選項1可能是你最好的選擇。使用選項2，您可以從頭部丟失javascript和css。

你有過要放在格，頁面控制？如果它使用與「主」頁面相同的JavaScript文件和樣式表，那麼沒問題。

否則，你可以將它們添加到母版頁頭部（或身體的腳本，但頭CSS），但隨後它們會影響母版頁的其餘部分。如果可以的話，那麼解決這個問題的方法是在插入的頁面上使用一個獨特的class/id的容器元素，並確保該頁面的CSS和javascript隻影響容器內的東西。

例如（未經測試）：

var sub_page = $(data); 
$("#content").html(sub_page.find('body').html()); 

var head = $('head'); 
sub_page.find('head script').each(function(){ 
    var src = $(this).attr('src'); 
    // Assume that inline script tags should be added but check those with a src to see they aren't already used on the master page. 
    if(undefined === typeof src || '' === src || $('script[src="' + src + '"]').length == 0){ 
     head.append(this); 
    } 
});

CSS文件很可能需要在相同的方式腳本來對待。

來源

2014-04-13 09:55:10 Adam

爲什麼修改div的html內容（使用JQuery）也改變了我的頁面的其餘部分？

回答

相關問題