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

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 应用程序并非易事)但这是另一个症状:

如果在检查元素 Pane 的右侧页面(没有样式)上，我右键单击 <form>...</form>标记并选择[编辑为 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));
    })
}