jquery .html 不应用 CSS

Question

我使用 JQUERY 的 .html() 函数更改了 mu 站点上的内容。内容被替换后，内容不会应用任何 CSS 并获得 Web 浏览器的默认样式。如果我按 F5 并重新加载页面，则会应用 CSS，因此问题出在 JS 上。

JS:

function Go_to_sub_page(page,spage){
    //Get what language that is set
    var lang = document.getElementsByTagName('html')[0].getAttribute('lang');

    //Get and change content
    $.get('pages/' + page + '/' + spage + '.php',{'lang':lang},function(resp){
        $("#container").html(resp);
    });

    //Change URL
    window.history.replaceState("", "THUNDERSTUDIO: " + page, "?lang=" + lang + "&page=" + page + "&spage=" + spage);
}

HTML(即将加载):

<script src="scripts/create_project_selected.js" type="text/javascript"></script>

<section id="general">
    <span class="label">Title:</span>
    <span id="title" contenteditable>Insert Title</span>
    <select class="font">
        <option id="Arial">Arial</option>
        <option id="Times New Roman">Times New Roman</option>
    </select>
</section>

HTML/PHP(菜单):

require_once($_SERVER['DOCUMENT_ROOT']."../private_html/allowed_pages.php");
require_once($_SERVER['DOCUMENT_ROOT']."../private_html/lang.php");

$start =    "<ul>

            </ul>";

$create = "<ul>
                <li><a onclick=\"Go_to_sub_page('create','create')\">{$lang['create']['menu']['create']}<a></li>
                <li><a onclick=\"Go_to_sub_page('create','general')\">{$lang['create']['menu']['general']}<a></li>
            </ul>";

$help = "<ul>

            </ul>";

switch($page){
    case"start":
        echo $start;
        break;
    case"create":
        echo $create;
        break;
    case"help":
        echo $help;
        break;
}

CSS 1:html 没有使用任何一个，但如果您想看一下，我将其粘贴为链接。 http://pastebin.com/HPYd51rV

CSS 2(影响我想使用的 HTML 的 CSS):

<?php
    header("Content-type: text/css; charset: UTF-8");
?>

#general #title{
    margin-left: 4px;
    margin-right: 4px;

    color: red;
}
#general #title:hover{
    color: blue;
}

lang.php 是控制站点语言的文件。对这个问题没有影响。
allowed_pa​​ges.php 只影响菜单。

Answer 1

您的设置非常困惑，我能想到发生这种情况的唯一原因是您正在加载 <link href="css/create.php" rel="stylesheet" type="text/css" />在一个“ View ”中，然后通过用新 View (不链接到 CSS 样式表)替换该 View 来覆盖它:

<script src="scripts/create_project_selected.js" type="text/javascript"></script>

<section id="general">
    <span class="label">Title:</span>
    <span id="title" contenteditable>Insert Title</span>
    <select class="font">
        <option id="Arial">Arial</option>
        <option id="Times New Roman">Times New Roman</option>
    </select>
</section>

解决方案:

• 在您希望 CSS 在其中生效的每个“ View ”中包含指向 CSS 工作表的链接。
• 或者，在您页面的某处设置一个部分，您可以 $(element).append("<link href='' rel='stylesheet' id='unquie_indentifier_so_it_can_be_removed_later' / >")