我正在尝试使用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看起来像这样:
如果用ajax加载它们:
我该如何纠正?
编辑:没有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.