Question

我使用ajax请求服务器，并获得一些HTML代码的响应。我得到它并添加到具有id ='conten'但没有样式和脚本的div

这是我的ajax请求触发器：

  <li class="catalogs"  catalog_id="<?= $category->id?>"><?= $category->title?></li>

这是我的ajax帖子：

//get catalogs
        $('.catalogs').click(function () {
            let catalog_id = this.getAttribute('catalog_id')
            console.log(catalog_id)

            $.ajax({

                url: '/site/catalog',
                type: 'get',
                data: {
                    id: catalog_id
                }
            }).done(function (response) {
                $('#conten').html(response);
            })

        })

这是我在SiteController中的动作

    public function actionCatalog($id)
    {
        $products = \common\models\Product::find()->where(['category_id' => $id]);
        $subCategories = \common\models\SubCategory::findAll(['category_id' => $id]);
        return $this->renderAjax('index',[
            'products' => $products,
            'subCategories' => $subCategories,
        ]);
    }

这是我的id为“ conten”的div

 <div id="conten">
     <?= $content?>
 </div>

我的AppAssets文件

// css
'css/plugins.css',
        'css/style.css',
        'css/responsive.css'
//js

'js/jquery.js',
        'js/plugins.js',
        'js/functions.js'

Answer 1

您使用ajax加载JS和CSS吗？如果是这样，这是因为在文档准备就绪时，将加载包含所有css的html页面。.它将读取所有类，并根据其所适用的样式表进行加载。.但是在ajax中，我们将另一页面加载到相同的html页面，但是这次浏览器没有将html类映射到样式表，这就是CSS不能应用在样式表上的原因。

有两种方法可以实现此目的：一种是内联css，另一种是在ajax页面放置后再次加载所有css文件。您可以通过jquery或javascript来实现。

这里是示例： Is there an easy way to reload css without reloading the page?

为什么样式和javascript代码不适用于新添加的html内容

1 个答案: