Ajax-ed内容没有得到样式表？

Question

我附上了两页并排的截图。在左侧，右上角的表单元素作为整页的一部分加载，并使用twitter Bootstrap的样式完全设置了灰色well，form-inline等样式。

在右侧，表单通过ajax调用加载，代码为：

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).replaceWith($(data.childNodes))
    })
}

你可以看到表单没有大多数的bootstrap样式。除了它看起来像狗的呕吐物，在Inspect Element中你可以清楚地看到它与Bootstrap的css规则的大多数不匹配。

最？是的，大多数，但不是全部：它似乎与Bootstrap的form样式相匹配，但它似乎没有拿起.form-inline或.well样式！该页面非常基本，HTML（几乎）全部供您查看。此外，我无法将光标放在文本框中以开始在Ajaxed页面上键入。

除了这种CSS奇怪之外，唯一的区别是Ajaxed页面删除了<script>标记，正如Jquery插入所期望的那样。

这对我来说非常神秘。在Chrome和Firefox中进行了测试，具有相同的行为。同时使用insertBefore，before，insertAfter，after进行了测试，所有这些行为都具有相同的效果。有谁知道这可能导致什么？

编辑：仍然没有设法让一个演示工作（尝试部署Play 2.0应用程序是非常重要的）但这是另一个症状：

如果在Inspect Element窗格的右侧页面（没有样式），我右键单击<form>...</form>标签并选择[Edit as HTML]，不做任何更改，并保留编辑模式，样式立即出现，<form>突然看起来像左边的形式！显然HTML很好。

Answer 1

如果元素具有内联样式定义，则有时不会应用CSS。 您可以通过在定义中添加！important来为CSS定义赋予更多优先权。

例如：

p {
   font-size: !important;
}

另外，在你的代码中，我不确定我是否误解了函数名“replaceWith（）”。

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).replaceWith($(data.childNodes))
    })
}

请尝试使用以下代码：

function load(element, id){
    $.get("/lazyLoads/" + id, function(data){
        $(element).html($(data.childNodes));
       //$(element).append($(data.childNodes));
    })
}