【问题标题】:How to reload CSS after ajax callajax调用后如何重新加载CSS
【发布时间】:2013-07-17 17:30:27
【问题描述】:

我正在尝试修复页面上的 CSS 格式实际上我正在使用 Django 无限分页
在页面滚动上加载我的内容,但是当加载新内容时,应用于页面的 CSS 不起作用或必须刷新.....所以请告诉我如何将 CSS 应用于由 ajax 调用加载的新内容。 .

index.html:

<html>
<head>
    <title>Fashion</title>
    <link rel="stylesheet" type="text/css" href="static/css/style.css">
</head>
<body>


<div class="product_container">
    <ul class="product_list">
        <div class="endless_page_template">
            {% include page_template %}
        </div>
    </ul>
</div>
{% block js %}
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script src="static/js/endless_on_scroll.js"></script>
<script src="static/js/endless-pagination.js"></script>    
<script>
    $.endlessPaginate({paginateOnScroll: true,
    endless_on_scroll_margin : 10,
    paginateOnScrollChunkSize: 5        
});</script>
{% endblock %}
</body>
</html>

style.css:

.product_list
{
    margin:0;
    padding:0;
    list-style-type: none;
}

.product_list li
{
    margin:0;
    padding:0;
    height:150px;
    margin-bottom:5px;
}

.product_container
{
    width:800px;
    column-gap: 0;
    column-count: 2;
    -moz-column-gap: 0;
    -moz-column-count: 2;
    -webkit-column-gap: 0;
    -webkit-column-count: 2;
}

index_page.html:

{% load endless %}
{% paginate 10 contextList %}
{% for item in contextList %}
    <li>
        <a href="{{ item.productURL }}" ><img src="/images/{{ item.image_paths.0 }}/" height="100" width="100" border='1px solid'/></a>
        <br>
        <span class="price">
        <span class="mrp">MRP : {{ item.productMRP}}</span>
        {% if item.productPrice %}<br>
        <span class="discounted_price">Offer Price : {{ item.productPrice}}</span>
        {%endif%}
        </span>
    </li>  
{% endfor %}
</ul>
{% show_more "even more" "working" %}

我已应用 CSS 禁用 ul 项目符号,但在 ajax 调用后新数据有项目符号这意味着新数据 CSS 无法正常工作......谁能帮助我

【问题讨论】:

  • 您能否发布生成的 html 页面,其中包含一些已加载且未设置样式的示例 ul?我的直觉是您使用的选择器不正确。
  • css 规则是静态的,页面加载后添加到 dom 的任何项都应受规则约束。

标签: javascript python css ajax django


【解决方案1】:

尝试添加以下 css:

li {
    list-style-type: none;
}

如果这样可行,那么您的 css 选择器 .product_list 不正确,您需要以捕获所有 li 的方式指定它。

【讨论】:

  • 如果您发布实际页面的 html,而不是模板,我可以。
  • 这一切都没有其他页面
  • 当您在浏览器中实际查看此页面时,您能否发布生成并提供给浏览器的 HTML。
  • 感谢您的帮助,但这是我的错,我忘记在 {% endfor %} 中的 {% endfor %} 之后删除 index_page.html 后删除它工作正常
【解决方案2】:

我遇到了同样的问题,找到了将 CSS 样式内联到加载的标签中的唯一解决方案。

这不是最佳做法,但对我有用。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2013-09-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多