Fatal编程技术网
  • javascript/
  • Javascript 渲染部分模板不'；t使用ajax应用css（后端）

Javascript 渲染部分模板不'；t使用ajax应用css（后端）

javascript jquery css ajax

Javascript 渲染部分模板不'；t使用ajax应用css（后端）,javascript,jquery,css,ajax,Javascript,Jquery,Css,Ajax,为什么在呈现部分模板时不能应用css文件 我已经研究过了，现在我知道我可以将html文件的一部分返回到特定的div中，这是在特定的html中 我的问题，例如： 有两个html文件名 father.html和children.html，我想将children.html填充到father.html中的div标签中，这对我来说没问题！但是为什么children.html中的标记无法应用css（在父.css上设置） father.html有自己的外部文件father.css和father.js 对于f

为什么在呈现部分模板时不能应用css文件

我已经研究过了，现在我知道我可以将html文件的一部分返回到特定的div中，这是在特定的html中

我的问题，例如：

有两个html文件名 father.html和children.html，我想将children.html填充到father.html中的div标签中，这对我来说没问题！但是为什么children.html中的标记无法应用css（在父.css上设置）

father.html有自己的外部文件father.css和father.js

对于father.html：

<html>
<head>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/father.css') }}">
    <script src="{{ url_for('static', filename='js/father.js') }}"></script>
</head>
<body>
    <div id="container">
        <!-- @@@ children.html here!! Using AJAX @@@ -->
    </div>
</body>
</html>
为了父亲

canvas {
    width: 100px;
    height: 100px;
}
对于children.html：

<table>
{% for r in data %}
<tr>
    <td> {{ r.id }} </td>
    <td> 
        <canvas class="demo" style="background-color: {{r.color }} "></canvas>
    </td>
</tr>
{% endfor %}
</table>
它不适用于children.html，它的canvas标记仍然是其原始大小

如果我将canvas style设置为children.html，它就会工作。（这很愚蠢）


帆布{
高度：100px；
宽度：100px；
}
...
（（同上））
...
这是什么问题？有什么办法解决这个问题吗

顺便说一句，father.js也有同样的问题。

你能发布children.html的全部内容吗？它是否包含、和元素或类似元素？@Maluen这是my whole children.html。我没有使用iframe和任何特殊标记。可能根本没有加载
css/father.css
，请尝试向其添加规则以更改文档的背景颜色，或者通过devtools检查文件是否正确加载。谢谢。现在，我只是将CSS和JS规则写入children.html 
<table>
{% for r in data %}
<tr>
    <td> {{ r.id }} </td>
    <td> 
        <canvas class="demo" style="background-color: {{r.color }} "></canvas>
    </td>
</tr>
{% endfor %}
</table>

@app.router('/returnChildrenTemplate')
def returnChildrenTemplate():
    result = ... # query from Database
    return render_template('children.html', data=result)

<head>
    <style>
        canvas {
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<table>
...
((  the same as above ))
...
</table>