动态添加的html div失去了css风格

时间:2016-04-01 11:30:44

标签: jquery html css ajax

我正在尝试使用ajax调用的响应将带有一些html的html div元素附加到另一个具有类名top-sellers的div。

ajax呼叫响应:

success : function(response) {
    var top_products_list = response.top_products;
    var new_products_list = response.new_products;

    product_query = '';
    $.each(new_products_list, function(i, item) {
                      product_query = product_query + "<div class='col-md-3 product-div'><section class='panel'><div class='pro-img-box'><img src='" + new_products_list[i][0] + "' alt='/></div><div class='panel-body text-center'><h4><a href='/product/" + new_products_list[i][7] + "/" + new_products_list[i][6] + "' class='pro-title'>" + new_products_list[i][1] + "</a></h4><p class='quantity'>" + new_products_list[i][2] + new_products_list[i][3] + "</p><p class='price'>Rs. " + new_products_list[i][4] + "<span style='padding-left: 5%;text-decoration: line-through;color: #797979;'>Rs. " + new_products_list[i][5] + "</span></p><div><button class='btn btn-success addtocart'>Add To Cart</button><button class='btn btn-success addtofav'><i class='fa fa-heart'></i></button></div></div></section></div>";
    });
    console.log(product_query);
    $('.new-arrivals').html(product_query);
    $('.top-sellers').html(product_query);
},

我可以看到所有数据都附加到div。但是之后它失去了所有的样式。
如果我加载它们没有ajax,div看起来像这样:

enter image description here

如果用ajax加载它们:

enter image description here

我该如何纠正?

编辑:没有AJAX Sample Html Div

<div class="col-md-3 product-div">
    <section class="panel">
        <div class="pro-img-box">
            <img src="https://c143.pcloud.com/dHZ6pwkZyfUAy7ZzvHjZZMHpBq7Z2ZZV9RZkZnJc8ZeA6MekI4mFjL2dypSEvqH8v2QRjV/friends.jpg" alt=""/>
         </div>
         <div class="panel-body text-center">
             <h4>
                 <a href="#" class="pro-title">Leopard Shirt Dress</a>
             </h4>
             <p class="quantity">200 ml</p>
             <p class="price">Rs. 300.00<span style="padding-left: 5%;text-decoration: line-through;color: #797979;">Rs. 350.00</span></p>
             <div>
                 <button class="btn btn-success addtocart">Add To Cart</button><button class="btn btn-success addtofav"><i class="fa fa-heart"></i></button>
             </div>
         </div>
     </section>
 </div>

Ajax response div is in jquery code.

0 个答案:

没有答案