0

ページの CSS フォーマットを修正しようとしています実際には、Django エンドレス ページネーションを使用し
てコンテンツをページ スクロールにロードしていますが、新しいコンテンツがロードされると、ページに適用された CSS が機能しないか、更新する必要があります .....そこで、ajax 呼び出しで読み込んだ新しいコンテンツに CSS を適用する方法を教えてください..

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 が機能していないことを意味します。

4

2 に答える 2

1

次の css を追加してみてください。

li {
    list-style-type: none;
}

それが機能する場合は、css セレクター.product_listが正しくないため、すべての li をキャッチする方法で指定する必要があります。

于 2013-07-17T17:41:14.757 に答える
0

私は同じ問題を抱えていて、ロードされたタグに CSS スタイルをインラインで配置する解決策しか見つかりませんでした。

これはベストプラクティスではありませんが、うまくいきました。

于 2013-07-17T17:35:41.110 に答える