jquery 和 html，当单击 link 时，网站不会加载到 div 中

Question

我有以下问题：我正在尝试将另一个 html 文件加载到我的 index.html 中的 div 中。好吧，它对某些 links 工作正常，但对于其他 links（那些在 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>

最后是我的 jquery：

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

总结一下：我的主文件中有一个 div 框，它是空的且 ID 为 "mainbox"。这个 "mainbox" 不应该留空。我想用内容填充它，"mainbox" 之外的所有 link 都可以填充它，但是如果我的 "mainbox" 里面有一个 link 然后我点击它，什么也没有发生。它可以 link 到像谷歌这样的外部站点，但不能到 html 文件，这些文件应该 "erase" 主箱的内容并用新的...

填充

Answer 1

您可以使用 ajax 委托将要加载到 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 */
});

jquery 和 html，当单击 link 时，网站不会加载到 div 中

jquery and html, a site wont load into a div, when clicked on the link

html

css

jquery