javascript - 为什么 ajax 加载的内容显示不正确？
问题描述
我试图通过使用 jquery ajax 即在不重新加载页面的情况下单击特定类别的产品。
现在，当产品使用 Ajax 加载时，它们的 CSS 似乎受到干扰，或者某些 jQuery 事件未加载。我已经检查过了，所有的 CSS 类都像原始文件一样放置得很好，而且我也尝试了其他答案中建议的“.on”方法，但它没有做任何事情。你能帮我找出问题所在吗？
原始外观： 这就是外观应有的样子
在 Ajax 加载内容之后： 这个外观是在 ajax 加载之后
all_products.php（原始文件）
<div class="product_grid">
<div class="product_grid_border"></div>
<div id="prod_container">
@foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div><a href="{{URL::to('')}}/user/product/{{$product->id}}" tabindex="0">{{ucwords($product->name)}}</a></div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
@endforeach
</div>
</div>
ajax_products.blade.php（通过 ajax 添加）
@foreach($products as $product)
<!-- Product Item -->
<div class="product_item is_new">
<div class="product_border"></div>
<div class="product_image d-flex flex-column align-items-center justify-content-center"><img src="{{URL::to('')}}/public/uploads/images/{{$product->image}}" alt=""></div>
<div class="product_content">
<div class="product_price">${{$product->price}}</div>
<div class="product_name"><div><a href="{{URL::to('')}}/user/product/{{$product->id}}" tabindex="0">{{ucwords($product->name)}}</a></div></div>
</div>
<div class="product_fav"><i class="fas fa-heart"></i></div>
<ul class="product_marks">
<li class="product_mark product_discount">-25%</li>
<li class="product_mark product_new">new</li>
</ul>
</div>
@endforeach
my_js.js
$(document).on('click','.cat',function(){
$.ajax({
url: 'http://localhost/cart_test/user/get_cats',
type: 'POST',
data: { cat : $(this).attr('id')},
success: function(data){
d = JSON.parse(data);
var container = $('#prod_container');
container.empty();
container.append(d);
},
error: function()
{
alert('error');
}
});
});
前端控制器.php
public function get_cats(Request $request)
{
$id = $request->input('cat');
$products = product::where('category_id','=',$id)->get();
$prods = view('frontend.modules.ajax_products',compact('products'))->render();
echo json_encode($prods);
}
商店.css
.product_grid
{
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
-ms-transform: translateX(-20px);
-o-transform: translateX(-20px);
transform: translateX(-20px);
width: calc(100% + 40px);
}
.product_grid_border
{
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 3px;
height: 100%;
background: #FFFFFF;
z-index: 1;
}
.product_item
{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
width: 20%;
background: #FFFFFF;
cursor: pointer;
padding-top: 40px;
padding-bottom: 24px;
text-align: center;
}
.product_border
{
display: block;
position: absolute;
top: 52px;
right: 1px;
width: 1px;
height: calc(100% - 71px);
background: #e5e5e5;
}
.product_image
{
width: 100%;
height: 115px;
}
.product_image img
{
display: block;
position: relative;
max-width: 100%;
}
.product_content
{
width: 100%;
}
.product_price
{
font-size: 16px;
font-weight: 500;
margin-top: 25px;
}
.product_item.discount
{
color: #df3b3b;
}
.product_price span
{
position: relative;
font-size: 12px;
font-weight: 400;
color: rgba(0,0,0,0.6);
margin-left: 10px;
}
.product_price span::after
{
display: block;
position: absolute;
top: 6px;
left: -2px;
width: calc(100% + 4px);
height: 1px;
background: #8d8d8d;
content: '';
}
.product_name
{
margin-top: 4px;
overflow: hidden;
}
.product_name div
{
width: 100%;
}
.product_name div a
{
font-size: 14px;
font-weight: 400;
color: #000000;
white-space: nowrap;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_name div a:hover
{
color: #0e8ce4;
}
.product_fav
{
position: absolute;
top: 33px;
right: 12px;
width: 36px;
height: 36px;
background: #FFFFFF;
box-shadow: 0px 1px 5px rgba(0,0,0,0.1);
border-radius: 50%;
visibility: hidden;
opacity: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav:hover
{
box-shadow: 0px 1px 5px rgba(0,0,0,0.3);
}
.product_fav i
{
display: block;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
color: #cccccc;
line-height: 36px;
pointer-events: none;
z-index: 0;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_fav.active i
{
color: red;
}
.product_item:hover .product_fav
{
visibility: visible;
opacity: 1;
}
.product_marks
{
display: block;
position: absolute;
top: 33px;
left: 24px;
-webkit-transition: all 200ms ease;
-moz-transition: all 200ms ease;
-ms-transition: all 200ms ease;
-o-transition: all 200ms ease;
transition: all 200ms ease;
}
.product_mark
{
display: inline-block;
width: 36px;
height: 36px;
border-radius: 50%;
color: #FFFFFF;
text-align: center;
line-height: 36px;
font-size: 12px;
}
.product_new
{
display: none;
background: #0e8ce4;
visibility: hidden;
opacity: 0;
}
.product_discount
{
display: none;
background: #df3b3b;
visibility: hidden;
opacity: 0;
}
.product_item.is_new .product_new,
.product_item.discount .product_discount
{
display: inline-block;
visibility: visible;
opacity: 1;
}function initIsotope() {
var sortingButtons = $('.shop_sorting_button');
$('.product_grid').isotope({
itemSelector: '.product_item',
getSortData: {
price: function(itemElement) {
var priceEle = $(itemElement).find('.product_price').text().replace('$', '');
return parseFloat(priceEle);
},
name: '.product_name div a'
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
// Sort based on the value from the sorting_type dropdown
sortingButtons.each(function() {
$(this).on('click', function() {
$('.sorting_text').text($(this).text());
var option = $(this).attr('data-isotope-option');
option = JSON.parse(option);
$('.product_grid').isotope(option);
});
});
}
/*
8. Init Price Slider
*/
function initPriceSlider() {
if ($("#slider-range").length) {
$("#slider-range").slider({
range: true,
min: 0,
max: 1000,
values: [0, 580],
slide: function(event, ui) {
$("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
}
});
$("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
$('.ui-slider-handle').on('mouseup', function() {
$('.product_grid').isotope({
filter: function() {
var priceRange = $('#amount').val();
var priceMin = parseFloat(priceRange.split('-')[0].replace('$', ''));
var priceMax = parseFloat(priceRange.split('-')[1].replace('$', ''));
var itemPrice = $(this).find('.product_price').clone().children().remove().end().text().replace('$', '');
return (itemPrice > priceMin) && (itemPrice < priceMax);
},
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
});
}
}解决方案
推荐阅读
- python-3.x - 使用 python 脚本停止程序/应用程序
- python - 如何使用 AppEngine 和 Python 存储访问/刷新令牌？
- xml - 我需要打印 94 个 9 作为虚拟拖车
- scala - 在windows函数中比较两行与不同列的火花
- docker - 无法在 docker-compose 中为 Docker Windows 绑定主机卷
- jquery - 如何在jQuery中相邻显示输入值？
- mysql - 设计自动化数据库的最佳解决方案？
- java - 在 JSP 中使用 Display 标签进行分页
- sql - SQL Server 中的聚合函数或 GROUP BY 子句
- python - 如何在 Pandas/Python 中组合 2 个分别具有“小时”和“分钟”的数据框列？