Html 没有动态加载到 Div答案

【问题标题】：Html not loading dynamically into DivHtml 没有动态加载到 Div
【发布时间】：2014-06-18 10:26:41
【问题描述】：

过去，我已经能够使用 Load HTML page dynamically into div with jQuery 提供的答案将 html 完美加载到 div 中，但是，我开始了一个基于 codrops 模板 (multi-level push menu) 的新项目，页面未加载到指定的 .content div

网页是here。我已经加载了所有正确的 jquery 库，并且测试页面“bio.html”的路径正确。

我正在非常专门地处理第一个 ul li 菜单列表链接“传记”，只是为了测试它的功能。

我在 jquery 中使用的代码是

$(document).ready(function(){
    $("#bio").click(function(){
        $('.content').load('bio.html');
        //alert("Thanks for visiting!");
    }); 
});

选择器“#bio”已应用于

<li><a class="icon icon-male" id="bio">Biography</a></li>

在 index.html 中。在 class="content" div 标签中，我将它的 css 设置为

.content {
    color: white;
    background: rgba(0,0,0,0.9);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0.9)), color-stop(100%, rgba(0,0,0,0.6)));
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.6) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
    width: 60%;
    border-radius: 2px;
    padding: 3em 2em;
    max-width: 1200px;
    max-height: 800px;
    margin: 0 auto;
    box-shadow: 0 5px 7px -5px rgba(0,0,0,.7);
}

我不知道上述任何代码是否会干扰单击处理程序时不允许页面动态加载的任何内容。我确实从 class="content clearfix" 对 class="content" 进行了更改，因为我现在不太担心使用 clearfix hack，这是在原始 codrops html 中识别元素的唯一变化。

【问题讨论】：

我在控制台中得到$ is not defined ，任何人也得到相同的结果。
是的，js/linking.js 应该放在 jQuery 之后。
我认为这可能是因为您引用了 2 个不同版本的 jQuery（1.4 和 1.6）。您可以尝试删除其中一个吗？
这正是问题所在，非常感谢！我确定我已经犯了同样的错误一段时间了。我删除了 1.4 库并在之后移动了 linking.js。工作得很好

标签： javascript jquery css clearfix

【解决方案1】：

查看您的链接，您正在加载您的 jquery 文件，因为您的代码未定义“$”，将您的 jquery 库移到该链接之上，它应该开始工作。

【讨论】：

【解决方案2】：

您在脚本之后调用了 jQuery 库，先调用 jQuery，然后调用你的脚本

我鼓励您使用 1.9.0 或更高版本。

【讨论】：