jQuery .load()弄乱了我的<a>标记

Question

好吧，事情是这样的。我有一个网站，我正在动态加载所有的内容。我基本上是将其他页面的内容加载到主页的div中。如果我去掉所有的函数和花哨，我就把它的范围缩小到.load()函数。每当它执行它时，我的链接就会乱七八糟，乱七八糟，而且我找不到它。我试着搜索，但似乎没有人有我的问题，但如果我错过了什么，我道歉。这让我很沮丧，我只想知道它是什么。

Javascript

function openContent(x)
{
        var q= x+".php #info";
    $("#content").load(q,function() { $('#content').mCustomScrollbar({ scrollButtons:{ enable:false} }); });
    $("#container").animate({opacity:1.0,width:'890px'},3000);
    $('#content').animate({opacity:1.0,width:'890px'},3000);
    $('.close').animate({opacity:1.0,},12000);
}

PHP

<div id="background">
    <div id="logo"></div>
        <input type="button" class="web-development" onclick="openContent('development')"/>
        <input type="button" class="graphic-design" onclick="openContent('graphic-design')" />
        <input type="button" class="photography" onclick="openContent('photography')" />
        <input type="button" class="projects" onclick="openContent('projects')" />
        <input type="button" class="contact" onclick="openContent('contact')" />
        <input type="button" class="close" onclick="closeContent()" />
    <div id="container" ><div id="content"></div></div>
    <div id="footer">Copyright <?php echo date('Y'); ?> &copy;</div>
</div>

单击这些按钮时，它们会将相应的内容加载到content div中。

CSS

#background
{
    background: url('../Images/background.png') no-repeat;
    margin-right:auto;
    margin-left:auto;
    height:800px;
    width:1280px;
}

#logo
{
    background: url('../Images/logo.png') no-repeat;
    width: 235px;
    height: 175px;
    z-index: 999;
    position:absolute;
    top: 10px;
    left: 535px;
}

/*container to affect the scroll */
#container
{
    background: url('../Images/content_bg.png');
    height:650px;
    width:1px;
    opacity:0.0;
    padding: 90px 40px 0px 40px;
    position:absolute;
    z-index:7;
    left:165px;
    top:70px;
}
/* deocarting content */
#content
{
    background: url('../Images/content_bg.png');
    opacity: 0.0;
    width:1px;
    height:650px;
    padding: 0px 0px 0px 0px;
    z-index:8;
    color:#f4cf00;
    /* for IE 5&6&7 opacity hack */
    filter: alpha(opacity=0);
    font-family:"Gabriola";
    font-size:20px;
    overflow:auto;

}

/* classes for the buttons on the main page */
.projects
{
    position:absolute;
    top:160px;
    left:425px;
    background: url('../Images/projects.png') no-repeat;
    width:130px ;
    height:640px;
    z-index: 2 ;
    border: 0px solid;
}

这就是CSS，它规定了如何定义内容div和容器。就像我说的，如果我不使用加载功能，只是让内容手动淡入，它就会起作用。使用加载，我的链接消失，我必须使用标签来定位它们

Answer 1

也许值得重复你的问题，看看响应值是怎么说的？如果你能在将来捕获错误并告诉用户，那就太好了。

$("#content").load(
    q,
    function(responseContent, responseStatus, responseObject) {
        console.log(responseContent);
        console.log(responseStatus);
        console.log(responseObject);
    }
);

希望这能有所帮助。