Laravel Blade中AJAX筛选数据后忽略div类样式问题求助

我是AJAX新手，在Laravel 10中尝试通过AJAX实现无刷新数据筛选功能，筛选能正常获取数据，但执行后页面显示异常。排查发现，AJAX加载新数据后，原容器上的popular-causes__carousel owl-theme owl-carousel类对应的轮播效果失效了。

Blade视图代码 #

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    const clickableElements = document.querySelectorAll('.clickable');
    
    // 初始化Owl轮播
    function initOwlCarousel() {
        $('#daftar_campaign').owlCarousel({
            // 填写你项目中实际的轮播配置参数
            loop: true,
            margin: 30,
            nav: true,
            responsive: {
                0: {
                    items: 1
                },
                768: {
                    items: 2
                },
                1200: {
                    items: 3
                }
            }
        });
    }

    // 页面加载时初始化轮播
    $(document).ready(function() {
        initOwlCarousel();
    });

    // 根据类别筛选Campaign
    function filterCampaignByCategory(category) {
        $.ajax({
            type: 'GET',
            url: '/filter', // 对应你的路由地址
            data: { filter: category },
            success: function(data) {
                var campaigns = data.campaigns;
                var campaignList = $('#daftar_campaign');
                
                // 先销毁现有轮播实例，避免冲突
                campaignList.trigger('destroy.owl.carousel');
                campaignList.empty();
                
                // 追加筛选后的新内容
                $.each(campaigns, function(key, campaign) {
                    campaignList.append(
                        '<div class="popular-causes__sinlge">' +
                        '<div class="popular-causes__img">' +
                        '<img height="300px" src="http://127.0.0.1:8001/storage/' + campaign.BannerCampaign + '" alt="">' +
                        '<div class="popular-causes__category">' +
                        '<p>' + campaign.KategoriCampaign + '</p>' +
                        '</div>' +
                        '</div>' +
                        '<div class="popular-causes__content" style="width: 370px">' +
                        '<div class="popular-causes__title" style="height: 100px">' +
                        '<h3><a href="campaign-details.html">' + campaign.NamaCampaign + '</a></h3>' +
                        '</div>' +
                        '<div class="popular-causes__progress" style="height: 200px">' +
                        '<div class="bar">' +
                        '<div class="bar-inner count-bar" data-percent="' + campaign.percentageCompleted + '%">' +
                        '<div class="count-text">' + campaign.percentageCompleted + '%</div>' +
                        '</div>' +
                        '</div>' +
                        '<div class="popular-causes__goals">' +
                        '<p><span>' + campaign.HasilDonasiCampaign + '</span> Terkumpul</p>' +
                        '<p><span>' + campaign.TargetCampaign + '</span> Target</p>' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>'
                    );
                });
                
                // 重新初始化轮播，让新内容生效轮播效果
                initOwlCarousel();
            }
        });
    }

    clickableElements.forEach(function(element) {
        element.addEventListener('click', function() {
            const value = element.getAttribute('data-value');
            filterCampaignByCategory(value);
        });
    });

    function sendGetRequest(value) {
        window.location.href = "/?filter=" + value;
    }

    $('.category-icon').on('click', function() {
        var selectedCategory = $(this).data('category');
        filterCampaignByCategory(selectedCategory);
    });
</script>

<!--campaign Start-->
<section class="popular-causes">
    <div class="container pb-5 mb-5">
        <div class="block-title text-left">
            <h4>Help the People</h4>
            <h3>Our Popular Campaigns</h3>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div class="popular-causes__carousel owl-theme owl-carousel" id="daftar_campaign">
                    @foreach ($campaigns as $campaign)
                        <div class="popular-causes__sinlge">
                            <div class="popular-causes__img">
                                <img height="300px" src="http://127.0.0.1:8001/storage/{{ $campaign->BannerCampaign }}"
                                    alt="">
                                <div class="popular-causes__category">
                                    <p>{{ $campaign->KategoriCampaign }}</p>
                                </div>
                            </div>
                            <div class="popular-causes__content" style="width: 370px">
                                <div class="popular-causes__title" style="height: 100px">
                                    <h3><a href="campaign-details.html">{{ $campaign->NamaCampaign }}</a>
                                    </h3>
                                </div>
                                <div class="popular-causes__progress" style="height: 200px">
                                    <div class="bar">
                                        <div class="bar-inner count-bar"
                                            data-percent="{{ $campaign->percentageCompleted }}%">
                                            <div class="count-text">{{ $campaign->percentageCompleted }}%</div>
                                        </div>
                                    </div>
                                    <div class="popular-causes__goals">
                                        <p><span>{{ $campaign->HasilDonasiCampaign }}</span> Terkumpul</p>
                                        <p><span>{{ $campaign->TargetCampaign }}</span> Target</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</section>

控制器代码 #

public function filter(Request $request){
    $filter = $request->input('filter');
    if (empty($filter)) {
        $campaigns = Campaign::with('user')
                    ->select('NamaCampaign','UrlCampaign','KategoriCampaign','BannerCampaign','MulaiCampaign','AkhirCampaign','TargetCampaign','HasilDonasiCampaign')
                    ->where('Prioritas', 1)
                    ->where('Aktif', 1)
                    ->latest('idCampaign')
                    ->get();
    } else {
        $campaigns = Campaign::with('user')
                    ->select('NamaCampaign','UrlCampaign','KategoriCampaign','BannerCampaign','MulaiCampaign','AkhirCampaign','TargetCampaign','HasilDonasiCampaign')
                    ->where('KategoriCampaign', $filter)
                    ->where('Prioritas', 1)
                    ->where('Aktif', 1)
                    ->latest('idCampaign')
                    ->get();
    }
    return response()->json(['campaigns' => $campaigns]);
}

问题原因 #

Owl Carousel这类轮播插件是在页面初始加载时，对指定容器内的元素进行初始化，生成轮播所需的DOM结构、事件绑定和样式。AJAX动态替换容器内容后，原有轮播实例已经失效，新添加的元素没有被轮播插件识别，导致轮播效果消失，元素变成普通堆叠显示。

解决步骤 #

1. 抽离轮播初始化函数：把Owl Carousel的初始化代码写成独立函数，方便重复调用。
2. 销毁旧实例：在AJAX成功回调中，清空容器前先销毁现有的轮播实例，避免内存泄漏和冲突。
3. 重新初始化轮播：追加完新的Campaign内容后，调用初始化函数，让插件重新识别新元素并生成轮播效果。

注意：需要根据自己项目中Owl Carousel的实际配置参数，修改initOwlCarousel()函数里的选项，确保和初始页面的轮播效果一致。

内容的提问来源于stack exchange，提问作者Gagas Amukti