jquery和html，一個網站不會加載到一個div，當點擊鏈接

我有以下問題：我想加載一個不同的HTML文件到我的index.html div。它對一些鏈接工作正常，但對於其他鏈接（在div中打開的鏈接），情況並非如此。代碼如下：jquery和html，一個網站不會加載到一個div，當點擊鏈接

第一HTML

<!DOCTYPE html> 
<html> 
    (...) 
    <body> 
     <div id="header"> 
      <ul style="text-align: center; font-size: 16px; text-shadow: 1px 1px black; color: red;"> 
       <li id="home"><a href="#" id="load_home"><p>HOME</p></a></li> 
       <li id="media"><p>MEDIA</p> 
        <ul> 
         <li><a href="#" id="load_test">media</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
     <div id="mainbox"> 
      <!--CONTENT IS DISPLAYED HERE--> 
     </div> 
    </body> 
</html>

則可以裝載ATM兩個站點：

<p style="color: azure; text-shadow: 1px 1px black;"><a href="#" id="load_home">load home</a></p> 

<p style="color: azure; text-shadow: 1px 1px black;"><a href="#" id="load_test">load test</a></p>

和finaly我的jquery：

$("#load_home").on("click", function(){ 
     $("#mainbox").load("home.html"); 
    }); 
    $("#load_test").on("click", function(){ 
     $("#mainbox").load("testcontent.html"); 
    });

很好地概括起來：我的主文件中有一個div框，它是空的，並且具有id「mainbox」。這個「主箱」不應該留空。我想填充它的內容和「mainbox」以外的所有鏈接都可以填充它，但是如果我在我的「mainbox」中有一個鏈接，並且我點擊它，什麼都不會發生。它可以鏈接到外部網站像谷歌，但不是HTML文件，這應該「刪除」mainbox的內容，並用新的填充...

來源

2015-01-04 A1asd

家庭和媒體鏈接工作很好......只有在div中的鏈接出現問題。 – A1asd

你的腳本只適用於父窗口，不適用於任何新加載的窗口或框架;所以如果你點擊新加載的'home.html'和'testcontent.html'窗口中的鏈接，它們不會受到JavaScript的影響。 –

是否有必要加載完整的html頁面，尤其是考慮到他們沒有很多內容？有時候提取必要的html並插入會爲你節省很多複雜的工作。 –

你可以委派事件的元素將被加載到DOM阿賈克斯。

然而，你不清楚你期望這些鏈接做什麼。

/* create a click handler for all current or future <a> within id=mainbox*/ 
$("#mainbox").on("click",'a', function(e){ 
    e.preventDefault(); 
    alert(this.href);/* no sure what you want them to do here */ 
});

來源

2015-01-04 01:23:28 charlietfl

嘿。謝謝你的答案。但我不敢說，我不明白，這段代碼做了什麼。我也嘗試添加它做我的script.js文件，但仍然沒有贏得load_test – A1asd

你的問題沒有得到很好的解釋。聽起來像是你想要ajax加載的鏈接將點擊處理程序應用到它們上 – charlietfl

另請注意，你不能重複ID的ina頁面，請使用class而不是 – charlietfl

jquery和html，一個網站不會加載到一個div，當點擊鏈接

回答

相關問題