jquery 和 html，当点击链接时，网站不会加载到 div 中答案

【问题标题】：jquery and html, a site wont load into a div, when clicked on the linkjquery 和 html，当点击链接时，网站不会加载到 div 中
【发布时间】：2015-01-04 01:00:46
【问题描述】：

我有以下问题：我正在尝试将不同的 html 文件加载到我的 index.html 中的 div 中。好吧，它适用于某些链接，但对于其他链接（在 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”中有一个链接并且我点击它，什么也不会发生。它可以链接到像谷歌这样的外部站点，但不能链接到 html 文件，它应该“擦除”主框的内容并用新的内容填充它......

【问题讨论】：

家庭和媒体链接工作得很好......只有 div 中的链接有问题。
您的脚本只能在父窗口上运行，而不能在任何新加载的窗口或框架上运行；因此，如果您在新加载的home.html 和testcontent.html 窗口中单击链接，它们将不会受到 JavaScript 的影响。
是否有必要加载完整的 html 页面，尤其是考虑到它们没有很多内容？有时提取必要的 html 并插入会省去很多麻烦。
我想不出另一种解决方案。是否有可能让这些链接正常工作，而无需抛出这个概念？
@che-azeh 没有复杂性......事件可以委托

标签： jquery html css

【解决方案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 */
});

【讨论】：

嘿。谢谢你的回答。但我不敢说，我不明白，这段代码是做什么的。我也尝试将它添加到我的 script.js 文件中，但 load_test 仍然没有获胜
您的问题没有得到很好的解释。听起来您希望 ajax 加载的链接具有应用到它们的点击处理程序
另外注意不能重复id的in页面，改用class
对不起。总结一下：我的主文件中有一个 div 框，它是空的，id 为“mainbox”。这个“主机箱”不应该是空的。我想用内容填充它，“mainbox”之外的所有链接都可以填充它，但是如果我的“mainbox”中有一个链接并且我点击它，什么也不会发生。它可以链接到像谷歌这样的外部网站，但不能链接到 html 文件，它应该“擦除”主框的内容并用新的...
您显示的代码中的任何内容都不会阻止正常的链接表单工作。我给你的代码允许你将点击处理程序绑定到将来加载的链接